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

现阶段在移动端界面盛行，响应式布局在多个企业网页上进行实用，并达到了相当不错的效果。媒体查询在如今响应式布局网页越来越广泛盛行的今天，充当着非常重要的角色。现在我们来浅谈媒体查询在CSS中基本使用方法。媒体查询的定义：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。媒体查询的应用：外部通过meta标签使用。常用的类型：上述两个例子效果相同，从左到右依次功能是：设置一个移动端浏览窗孔；设置像素宽度遵循移动端设定宽度（手机为980px）；不允许用户进行缩放；实例1：（当屏幕的宽度大于200px时）@media 媒体类型 and（媒体特性）{ 你的样式;}实例2：可以使用关键词"and"将多个媒体特性结合在一起。

实例3：

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

实例4：not关键字（还有only关键字）作用基本相同

媒体查询遵从就近原则，符合两个媒体特性的样式，将会产生覆盖。