--- theme: smartblue --- # 官网Web开发方案之媒体查询实现三端适配 ## 一、名词含义 ### 响应式设计 > 响应式设计即响应式网页设计（responsive web design, RWD），指的是web页面适应不同屏幕尺寸，进行对应布局和样式调整的设计思想。 ### 媒体查询 > 媒体查询（Media Queries）是CSS3中新增的一种机制（CSS2中已经可以使用），它利用浏览器的媒体类型和特性，对目标媒体（通常为桌面、平板等的显示器、移动设备等）的种类、尺寸、分辨率和支持的颜色深度等特性进行查询，从而根据这些特性设置相应的样式，进而决定其渲染的具体效果。 ### 三端适配 > 三端适配没有严格的定义，在前端web开发中主要指的是对PC端、pad端（平板）、移动端不同屏幕尺寸，进行相应布局和样式的调整，使网页在不同设备、不同分辨率的屏幕上呈现合理布局。 ## 二、媒体查询媒体查询的核心由两个部分组成：媒体类型和媒体特性。媒体查询的语法由可选的媒体查询修饰符、可选的媒体类型和零个或多个媒体特性组成，媒体查询语句不区分大小写。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b1728af8aeb440fa4a7224bc2811ab8~tplv-k3u1fbpfcp-watermark.image?) ### 1、媒体类型（Media type）媒体类型是可以在其上显示文档的用户客户端设备的广泛类别。 *截至此文章发布时*，定义的并且在使用的媒体类型有： - **all** 匹配所有设备，默认。 - **print** 匹配打印机和用于再现打印显示的设备，例如在“打印预览”中显示文档的 Web 浏览器。 - **screen** 匹配所有与打印不匹配的设备。有一些媒体类型虽然被定义，但是因为媒体类型和媒体特性的一些相互矛盾问题，所以这部分媒体类型已被弃用（deprecated）。而且，根据CSS工作组编辑器草案，预计未来所有的媒体类型都将被弃用，因为定义了适当的媒体功能来捕获媒体类型的重要差异（It is expected that all of the media types will also be deprecated in time, as appropriate media features are defined which capture their important differences.）。详情可访问： (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/@media ### 2、媒体特性（Media feature）媒体特性是比媒体类型更细粒度的匹配，它匹配用户客户端或显示设备的单个特定特性。它由特性名称、冒号和要匹配的值组成。 - **width** 视口的宽度，包括纵向滚动条的宽度。 - **orientation** 屏幕（viewport）方向，`portrait`: 纵向；`landscape`: 横向。 *更多特性可参考上方MDN链接。* ### 3、逻辑操作符（logical operator）媒体查询时可用的逻辑操作符有`not`、`and`、`only` 、`,`和 `or`。 - **and** 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为 true，它还用于将媒体功能与媒体类型结合在一起。 ```css // 满足横屏（未区分媒体类型，默认all）以及最小宽度为500px @media (min-width: 500px) and (orientation: landscape) { ... } ``` - **not** 用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 `not` 运算符，则还必须指定媒体类型。备注：在 Media Queries Level 3 中，not 关键字不能用于否定单个媒体特性表达式，而只能用于否定整个媒体查询，这个在实际开发中使用不多，更多细节和使用方式可查看MDN中相关规范。 - **only** 仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将 `screen and (max-width: 500px)` 简单地解释为 `screen`，忽略查询的其余部分，并将其样式应用于所有screen。如果使用only运算符，则还必须指定媒体类型。***通过它让选中的样式在老式浏览器中不被应用。*** ```css // 在老式浏览器中被解析为@media only，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式。 @media only screen and (max-width:500px) { ... } // 在老式浏览器中被解析为@media screen，样式应用于所有screen。 @media screen and (max-width:500px) { ... } // only关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。 // 所以，在使用中最好不要忽略only,虽然无论是否带上only在老式浏览器中都会有错误（带上会使样式不使用，不带会使样式应用于所有的screen），但是带上only可以避免较早的浏览器应用样式引起更大的页面错误。 ``` - **,（逗号）** 逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个媒体查询语句返回true。换句话说，列表的行为类似于逻辑或（`or`）运算符。 - **or** 等价于 `,` 运算符。在 Media Queries Level 4 中被添加。 ```css // 满足最小宽度为500像素或是横屏设备应用样式表 media (min-width: 500px) or (orientation: landscape) { ... } // 等同于 media (min-width: 500px), (orientation: landscape) { ... } ``` ### 4、定义和使用媒体查询广泛使用的有三种方式来定义和使用媒体查询： - 使用`@media`在**样式表**中指定媒体类型和媒体特性； - 使用`@import`在**样式表**中指定媒体类型和媒体特性； - 使用`media属性`在` // 注意：标签中使用媒体查询会增加页面http的请求次数，加重页面负担 ``` ### 5、媒体查询注意事项 - ``标签中使用媒体查询会增加页面http的请求次数，加重页面负担，所以并不推荐使用； >即使媒体查询返回 false，带有媒体查询的``标记的样式表**仍将下载**。但是，除非查询结果变为 true，否则其内容将不适用。 ## 三、三端适配 **（此节仅仅是我个人在项目开发中的实践和一些总结，仅作参考）** ### 1、常见设备屏幕尺寸分界 | | 设备 | 尺寸 | | --------- | ------------ | ---------- | | 超小屏幕 | 手机 | < 768px | | 小屏幕 | 平板及个别PC | 768px >= size < 992px | | 中等屏幕 | PC | 992px >= size < 1200px | | 大屏幕 | PC | 1200px >= size < 1680px | | 超大屏幕 | PC | >= 1680px | ### 2、常见响应式设计实现方案 **方案一：** 一套代码，针对不同屏幕对css进行调整，控制样式和布局，达到在不同设备、不同分辨率的屏幕上呈现合理布局的效果（一般官网开发常用）。 **方案二：** 多套代码，根据设备类型不同，加载不同的页面资源（各端区别较大、大型中后台管理系统常用）。 ### 3、方案选择及具体实施 **方案选择** 此项目中三端仅仅是布局的调整，主要的交互基本相同，三端之间的区别不是特别大，所以项目里用的是方案一。 **官网开发注意点** - 浏览器兼容性，`避免使用较新的技术`，比如CSS中的flex（IE10以下的浏览器不支持）； - 代码的可维护性，相对于一般不需要适配多端的管理系统，官网往往使用媒体查询，这增加了代码的复杂程度，同时也给后来的维护带来了较大的困难和挑战，所以在开发之初，要针对项目`定义一些通用的样式`，尽量降低代码维护的难度。 **具体实施** 项目主要使用浮动 + 定位 + 百分比布局（vw, padding、margin、min-height等）+ table标签（替代flex）实现 > table标签中的`、 ` 更易控制元素垂直居中，而且是html的原生标签，这些标签及其属性能够兼容大部分浏览器，所以用来替代CSS中的flex，缺点就是原来用flex一两行代码就能实现的效果，使用``可能要嵌套多层才行，但是为了兼容大部分浏览器，也只有这一个合适的方案（可能还有其他方式，欢迎评论区讨论）。 ```css // CSS文件中 ... ...通用样式书写... ... ... // 移动端 @media only screen and (max-width: 767px) { ...移动端样式... } // pad端（平板） @media only screen and (min-width: 768px) { ...pad端样式... } // PC端、一般屏幕 @media only screen and (min-width: 992px) { ...PC端、一般屏幕样式... } // PC端、大屏幕 @media only screen and (min-width: 1200px) { ...PC端、大屏幕样式... } // PC端、超大屏幕 @media only screen and (min-width: 1680px) { ...超大屏幕样式... } ``` >在实际开发中，在PC端屏幕较大的时候可能需要设置页面内容区域的宽度，一般有两种设计方案：方案一（常用）：页面达到`1360px`的时候，设置内容宽度为1280px，左右padding各40px （content-box）; 方案二：页面达到`1280px`的时候，设置内容宽度为1200px，左右padding各40px （content-box）。 **以上内容如有问题，可在评论区多多指正、讨论！**