媒体查询

媒体查询事css3的新语法.
使用@media查询,可以针对不同的屏幕尺寸设置不同的样式.

@media mediatype and|not|only (media feature) {

mediatype 查询类型,值: all用于所有设备,print用于打印机和打印预览.screen用于电脑,平板,手机显示屏幕.

关键字 将媒体类型或者多个媒体特性连接到一起做媒体查询条件.

• and :可以将多个媒体特性连接到一起,相当于且
• not 排除某个媒体特性,相当于非得意思.
• only 指定某个特定的媒体类型.

布局常用媒体特性(后续补充)

• width 定义输出设备中页面的可见区域
• min-width 最小的可见区域
• max-width 最大的可见区域

注意：

为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写

但是我们最喜欢的还是从小到大来写，这样代码更简洁