响应式设计-媒体查询

媒体查询

媒体查询只支持IE9+、chrome、ff等浏览器，IE8以下的浏览器可以下载引用respond.js，如下写法：

写法：

媒体查询能检测哪些属性：
    1.width 视口宽度
    2.height 视口高度
    3.device-width 渲染表面的宽度（对我们来说就是设备屏幕的宽度）
    4.device-height   渲染表面的高度（对我们来说就是设备屏幕的高度）
    5.orientation 检查设备处于横向还是纵向
    6.aspect-ration 基于视口宽度和高度的宽高比
        一个16:9比例的显示屏可以这样定义：aspect-ration:16/9;
    7.device-aspect-ration 基于设备渲染平面的宽高比
    8.color 每种颜色的位数例如 min-color:16 会检查设备是否拥有16位颜色
    9.color-index 设备颜色索引表中的颜色数。值必须是非负整数
    10.monochrome 检查单色帧缓冲区中每像素所使用的位数，值必须是非负整数
    11.resolution 用来检测屏幕或打印机的分辨率，例如：min-resolution:300dpi,
        还可以接受每厘米像素点数的度量值，例如，min-resolution:118dpcm;
    12.scan 电视机的扫描方式
        progressive 逐行扫描
        interlace 隔行扫描
        例如：720p HD电视（p表示逐行扫描）匹配 scan:progressive
        1080i HD电视（i表示隔行扫描）匹配 scan:interlace
    13.grid 用来检测输出设备是网络设备还是位图设备

    1-11可以有min- 、max- 创建一个查询范围，而12-13没有

写法：

　　1、link上面media属性判断，是否加载该css

　　eg：<link rel="stylesheet" type="text/css" media="screen and orientation:portrait" href="css/sreen_style.css" />

        　　orientation:portrait 意思是显示屏是纵放的，yes，加载改css
        　　not 在媒体查询的开头加上会颠倒改查询的逻辑
        　　and 是并||
        　　，或
　　2、css文件外链css文件

　　　　　@import url("phone.css") screen and (max-width:360px); /*当显示屏最大宽度小于360px时加载 */
　　3、直接书写：

　　　　@media screen and (max-width:980px) {
   　　　　　　body{
       　　　　　　background:#f0f;
      　　　　　　font-size:12px;
   　　　　　　}
　　　　　}

来源：https://www.cnblogs.com/HSDPA/p/3878576.html

标签

视口

css