h关于媒体查询基本使用方法

现阶段在移动端界面盛行，响应式布局在多个企业网页上进行实用，并达到了相当不错的效果。
媒体查询在如今响应式布局网页越来越广泛盛行的今天，充当着非常重要的角色。
现在我们来浅谈媒体查询在CSS中基本使用方法。

媒体查询的定义：

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

媒体查询的应用：

外部通过meta标签使用。常用的类型：

上述两个例子效果相同，从左到右依次功能是：
设置一个移动端浏览窗孔；
设置像素宽度遵循移动端设定宽度（手机为980px）；
不允许用户进行缩放；


实例1：（当屏幕的宽度大于200px时）
@media 媒体类型 and（媒体特性）{
       你的样式;
}


实例2：
可以使用关键词"and"将多个媒体特性结合在一起。


实例3：
device-width（device pixels）可以理解为是设备像素

实例4：
not关键字（还有only关键字）作用基本相同
媒体查询遵从就近原则，符合两个媒体特性的样式，将会产生覆盖。