尚硅谷css3---媒体查询

尚硅谷css3---媒体查询

一、总结

一句话总结：

媒体查询主要是根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）设置不同的样式，主要由三部分构成媒体类型（比如screen）、媒体属性（比如宽、高、屏幕类型）、关键字（and、only等）构成

 

1、媒体查询由哪三部分构成？

a、媒体类型：比如screen、print等

b、媒体属性：比如宽、高、屏幕是横屏还是竖屏等

c、逻辑操作符：not、and、only和逗号(,)

 

 

2、媒体查询中常见的媒体类型有哪些？

screen(各种屏幕，比如手机电脑等)、print(打印机)、all等

 

3、媒体查询中常见的关键字有哪些？

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

 

4、媒体查询中常见的媒体属性有哪些？

width宽、height高、orientation屏幕是横屏(landscape)还是竖屏(portrait)、device-width 等

 

 

 

二、媒体查询

1、css3媒体查询

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

2、媒体类型

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

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

3、媒体属性

width        （可加max min前缀）
height         （可加max min前缀）
device-width     （可加max min前缀）
device-pixel-ratio（可加max min前缀，需要加webkit前缀）
orientation   portrait竖屏
        landscape横屏

4、操作符，关键字 (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:取反