尚硅谷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:取反