网页的响应式布局与媒体查询

响应式布局可以看作是流式布局和自适应布局设计理念的融合。其目标是确保一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
下面的图片中，我通过拖动浏览器窗口，演示了网页的响应式布局。

响应式布局依赖媒体查询，而前端枚举的媒体查询是有限的，只能适应主流的宽高，要匹配足够多的屏幕大小，UI和前端的工作量都不小；通常应用响应式布局时改变浏览器宽度，“布局”会随之变化，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，要发挥响应式布局的特长需要UI了解这种布局方式，并给出多种方案。

• 对于前端和设计师，响应式布局的缺点是设计和布局上有难度；
• 对于用户来说，优点是在不同的设备上都有比较好的体验；
• 对于前后端交互来说，可能意味着PC和移动两端只出一套接口，更便于代码的维护。

在一些项目中，常常没有UI设计师，特别是后台的项目，前端会使用前端的UI框架，你会发现大部分的框架是响应式的，比如：Bootstrap,Amazium,MUI等等。我们不可能去学习每一个UI框架，只要了解了响应式布局的原理就可以很轻松的使用这些框架了。

CSS媒体查询

要实现响应式布局，前端必须能够获取设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）,在不改变页面内容的情况下，根据这些特征进行相应的布局，这就是媒体查询。
媒体查询是CSS3新增的功能，可以让我们根据设备显示器的特性设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

浏览器支持

使用媒体查询：

媒体查询写在CSS样式代码的最后，在同一特殊性下，靠后的的样式会重叠前面的样式。

语法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype：媒体类型，我们前端就写screen，用于电脑屏幕，平板电脑，智能手机。
media feature：媒体特性，前端最常用的有两个：

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

下面是指定样式到屏幕宽度位于500px到800px之间的设备：

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

关于媒体查询更加详尽的资料请见：CSS3媒体查询