LastPoem / Notes

This is a note library
1 stars 0 forks source link

响应式布局核心—媒体查询选择器 #17

Open LastPoem opened 5 years ago

LastPoem commented 5 years ago

css3媒体查询

css3媒体查询是响应式方案核心

媒体类型

   all                  所有媒体(默认值)
   screen           彩色屏幕
   print              打印预览

   projection     手持设备
   tv                   电视
   braille           盲文触觉设备
   embossed     盲文打印机
   speech        “听觉”类似的媒体设备
   tty                 不适用像素的设备

媒体属性

width              (可加max min前缀)
height             (可加max min前缀)
device-width       (可加max min前缀)
device-pixel-ratio(可加max min前缀,需要加webkit前缀)
orientation   portrait竖屏
              landscape横屏

操作符,关键字 (only,and,(,or),not)

    only:
    防止老旧的浏览器  不支持带媒体属性的查询而应用到给定的样式.
        @media only screen and (min-width:800px ){
                                规则;
                                规则
        }
        @media  screen and (min-width:800px ){
                                规则;
                                规则
        }
    在老款的浏览器下
        @media only    --->    因为没有only这种设备 规则被忽略
        @media screen --->   因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

        建议在每次抒写media query的时候带上only

    and:
        连接媒体属性 、连接媒体类型
        对于所有的连接选项都要匹配成功才能应用规则

    or(,) : 和and相似
        对于所有的连接选项只要匹配成功一个就能应用规则

    not:取反