响应式布局方案：真正的一\”码\”永逸，产品经理了解下

产品运营 2 年前 0

产品经理可能需要了解第3个技术知识点：什么是响应式布局？响应式布局实现原理等问题？

1. 什么是响应式布局

2. 响应式布局的实现方案

3. 响应式布局与自适应布局的区别

4.主流的响应式布局前端框架

5. 如何检查网站是不是响应式布局

1. 什么是响应式布局

响应式布局(Responsive design)是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个不同屏幕尺寸的终端，即响应式布局重点是自动适配手机端、平台、PC端，而不是为每个终端做一个特定的版本。

传统的开发方式是PC端开发一套，手机端再开发一套，甚至平板又是一套，而使用响应式布局只要开发一套就够，缺点就是CSS文件可能比较重。下图示例表示同一个响应式网站在不同屏幕尺寸终端下，布局、内容不同的展示形式。

理论上，在响应式布局中你却得考虑上百种不同的状态，虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。

不过实际开发过程中不可能考虑这么多种，这个请继续看下文“屏幕大小分割点”详细介绍，这里先来看看响应式布局优缺点：

优点

(1)跨平台和终端且不需要分配子域；我们常见的是一个pc是一个域名，移动端通常是m.xxx.com的域名。

(2)能够快捷解决多设备显示适应问题，甚至是未来设备；

(3)一定程度上减少开发的工作量，别高兴太早也有可能加大工作量。

缺点

(1)兼容性问题：如果是使用CSS3媒体查询开发网站，则不兼容低版本浏览器，比如低版本的IE浏览器，不过也有一定解决方案。

(2)可能会加载比较多的样式和脚本资源；

(3)业务复杂、布局多样化的网站不适合使用响应式布局，比如电商平台；

2. 响应式布局的实现方案

我们在上面了解了什么是响应式布局，那在实际项目中技术是如何去实现响应式布局呢？实现响应式布局的方案很多，介绍几种常用的方案：

(1) 百分比布局：通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。

(2)rem布局：rem单位都是相对于根元素html的font-size来决定大小的，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

(3)视口单位：css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。

以上几种方案专业度比较高，作为产品经理看看过就好，还是留给开发自己去玩吧，我们还是说说比较容易理解的方案–CSS3中的媒体查询(Media Query)。

媒体查询是制作响应式布局的一个利器，上面也提到会受到低版本浏览器的兼容问题，下面一起聊聊媒体查询到底如何实现的。

媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度自动重新渲染页面。

不管采用什么方案实现响应式，都会面对一个问题：如何选择屏幕大小分割点？市面上不同品牌的终端，他们的屏幕尺寸都是参差不齐的，这也给响应式布局带来一定的麻烦。

我们先来看看经典的响应式布局框架，Bootstrap是怎么进行分割？

从上图可看到Bootstrap提供一套支持5种范围的屏幕尺寸的代码。

不过还可以这样划分：480px、800px、1400px、1400px。

也可以这么分：600px、900px、1200px、1800px，可以适配到常见的14个机型。

以上的几种分割方案仅供大家参考，具体还是要按照项目中实际情况来自定义。媒体查询主要的作用是获取设备的宽和高，并设置不同屏幕尺寸下的样式、布局、内容。

就如同下面的代码的示例：我们可以定义iphone手机各种型号、IPAD、PC端不同的样式和布局，等到设备宽度达到要求范围内，就会展示预先设置好的样式、布局、内容。

/* iphone6 7 8 */body { background-color: yellow;}/* iphone 5 */@media screen and (max-width:320px) {/* 在这里可以针对iPhone5写特定的样式和布局 */  body {background-color: red;}}/* iphoneX */@media screen and (min-width:375px) and (-webkit-device-pixel-ratio:3) {/* 在这里可以针对iphoneX写特定的样式和布局 */  body {background-color: #0FF000;}}/* iphone6 7 8 plus */@media screen and (min-width:414px) {  body {background-color: blue;}}/* ipad */@media screen and (min-width:768px) {/* 在这里可以针对ipad写特定的样式和布局 */  body {background-color: green;}}/* pc */@media screen and (min-width:1100px) {/* 在这里可以针对PC写特定的样式和布局 */  body {background-color: black;}}