zoukankan      html  css  js  c++  java
  • css3 -- 媒体查询

    媒体查询:

    1、媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的尺寸,从屏幕上去除无关元素,提供更小的图片,让文本变得更加清晰

    2、语法

    @link元素调用,多种媒体选择中间用逗号隔开

    1 <link href="" rel="stylesheet" media="logic media and (expression)" >
    1 <link href="" rel="stylesheet" media="srceen,projection" >

    @import指令调用

    1 @import url("file") logic media and (expression)

    @在样式表中或style元素中添加

    1 @media logic media and (expression){
    2       rules  
    3 }

    3、媒体特征

    @样式

    1 @media screen (min-400px){
    2       h1{
    3            background:
    4       }
    5 }

    @设备宽度以及高度

    1 @media media and (device-1024px) {rules}
    2 @media media and (max-device-1024px) {rules}
    3 @media media and (min-device-1024px) {rules}

    @方向

    1 @media media and (orientation:landscape/portrait){rules}

    @高宽比

    1 @media media and (aspect-ratio:horizontal/vertical){rules}
    2 @media media and (device-aspect-ratio:horizontal/vertical){rules}

    @像素比

    1 @media media and (-webkit-device-pixel-ratio : number){rules}
    2 @media media and (-moz-device-pixel-ratio : number){rules}
    3 @media media and (max--moz-device-pixel-ratio : number){rules}
    4 @media media and (min--moz-device-pixel-ratio : number){rules}
  • 相关阅读:
    Linux系统挂载存储只读改成读写
    Linux kernel调试方法
    Linux设备树文件结构与解析深度分析
    #undef常用法
    Linux驱动中的platform总线分析
    在根文件系统中查看设备树(有助于调试)
    友元及操作符重载
    STM32 FLASH 擦除(以及防止误擦除程序代码)、写入
    C++学习笔记49:栈
    C++学习笔记48:链表的基本操作
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5524453.html
Copyright © 2011-2022 走看看