媒体查询

浏览器支持(版本)

Rule	chrome	IE	firefox	Safari	opera
@media	21	9	3.5	4.0	9

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

响应式布局容器

• 超小屏幕（手机，小于 768px）：设置宽度为 100%

• 小屏幕（平板，大于等于 768px）：设置宽度为 750px

• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px

• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

媒体查询语法

mediatype：设备类型；

expressions：设备特性；

使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询,上面语法中的[ and (设备特性)]可以出现0~N次

可以对多个设备特性进行匹配。

最大宽度max-width

最小宽度min-width