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

今天药忘吃喽~ 2022-04-25 10:40 264阅读 0赞

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

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

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

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

### CSS媒体查询 ###

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

##### 浏览器支持 #####

![在这里插入图片描述][20190605154405902.jpg]

##### 使用媒体查询： #####

媒体查询写在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媒体查询][CSS3]

[20190605163538907.gif]: /images/20220125/188a632dbc2b444196f4da37fcf8d3d0.png
[20190605154405902.jpg]: /images/20220125/ae6ea39434b14a78809dafda516616db.png
[CSS3]: https://blog.csdn.net/liuy_98_1001/article/details/51306833