1.逻辑关键字
and 选择的两个或多个媒体特性必须同时满足条件
not 对整个查询取反（除此之外，都将应用）只能放在开头使用
only 在不支持媒体查询的旧浏览器中隐藏样式表，只能放在开头使用
@import url(new.css) only all
2.媒体类型
all 所有能呈现内容的媒体
print 打印给非盲用户看的文档，或者是文档的打印预览
screen 呈现文档的屏幕载体，如电脑显示器和手持设备
speech 语音合成器、屏幕阅读器和其他音频渲染设备
3.媒体特性描述符
width、min-width、max-width、device-width、max-device-width、min-device-width
height、min-height、max-height、device-height、max-device-height、min-device-height
aspect-ratio、min-aspect-ratio、max-aspect-ratio、min-device-aspect-ratio、max-device-aspect-ratio
color、min-color、max-color、color-index、min-color-index、max-color-index
monochrome、min-monochrome、max-monochrome
resolution、min-resolution、max-resolution
orientation
scan
grid
【视口单位（可视区域）】
vw 可视区域宽度，总宽度为100vw
vh 可视区域高度，总高度为100vh
vmin 比较可视区域宽度和高度，哪个更小就用哪个
vmax 比较可视区域宽度和高度，哪个更大就用哪个
以上单位，需要配合rem单位使用
min-width 大于这个值或等于这个值
max-width 小于这个值或等于这个值
【屏幕的宽度】
device-width、max-device-width、min-device-width
即屏幕的横向尺寸
如：max-device-width:1200px 在设备输出区域的宽度小于或等于1200像素时起作用
【宽高比值】
aspect-ratio、min-aspect-ratio、max-aspect-ratio
如：min-aspect-ratio:2/1 在视区的宽高比至少为2:1时起作用
device-aspect-ratio、min-device-aspect-ratio、max-device-aspect-ratio
指媒体特性device-width和device-height的比值
如：device-aspect-ratio:16/9 在输出设备显示区域的宽高比正好为16:9时起作用
【彩色显示】
color、min-color、max-color、color-index、min-color-index、max-color-index
【单色】
monochrome、min-monochrome、max-monochrome
【分辨率】
resolution、min-resolution、max-resolution
【放置的方向】
媒体特性height大于或等于媒体查询width时，返回此值
orientation
【扫描方式】
scan
【栅格】
grid
4.响应式设计
@media(max-width:400px){
/*小屏*/
}
@media(min-width:401px) and (max-width:1000px){
/*中屏*/
}
@media(min-width:1001px){
/*大屏*/
}
【meta】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
name="viewport"：标记显示设备为视口
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
<meta http-equiv="X-UA-Compatible"content="IE=Edge，chrome=1">
content="IE=Edge 让IE的文档模式永远都是最新
chrome=1，这是由于Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果用户电脑安装这个chrome插件，就可让电脑内的IE浏览器规避版本因素，使用Webkit引擎及V8引擎进行排版及运算。当然如果用户没装这个插件，这段代码就会让IE浏览器以最高的文档模式展现效果。
【PC端完美兼容各种分辨率的最佳方案】
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;
搭配vw和rem
给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度
html{ font-size: 2vw; }
网友评论