响应式布局

响应式布局

优点：

兼容当前及未来新设备；

不足：

兼容性：低版本浏览器兼容性有问题； 代码累赘（dom结构复杂，样式复杂），加载时间长，后期维护复杂。

语法（媒体查询）

@media（规定宽度）and(规定宽度){css样式}样式仅在规定的宽度范围内生效；

设备类型（media type）

all 所有设备 screen 显示器 print 打印用纸或打印预览视图

关键字

not 排除某种特定的设备类型 only 指定的设备类型 and 表示与的关系 “,” 英文字母逗号并列，或；