响应式布局方案：真正的一"码"永逸，产品经理了解下常常的近义词

产品经理可能需要了解第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端不同的样式和布局，等到设备宽度达到要求范围内，就会展示预先设置好的样式、布局、内容。

body{ background-color:yellow;}@media screen and (max-width:320px) {body{background-color:red;}}@media screen and (min-width:375px) and (-webkit-device-pixel-ratio:3) {body{background-color:#0FF000;}}@media screen and (min-width:414px) {body{background-color:blue;}}@media screen and (min-width:768px) {body{background-color:green;}}@media screen and (min-width:1100px) {body{background-color:black;}}

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

自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。与响应式布局区别如下：

(1) 自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机端，从而请求服务层，返回不同的页面，只用考虑几种不同的状态；

举个例子：我们在pc端浏览一个网站，然后把窗口缩小并刷新页面，这时候可能看到网站的二级域名变成 "m" 开头，代表是移动端。

响应式布局通过检测视口分辨率，却得考虑上百种不同的状态(理论上)，实际上针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

(2) 自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

(3) 自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

自适应网站：https://m.ctrip.com/html5/(移动端)https://ctrip.com/(PC)响应式网站：https://segmentfault.com/4. 主流的响应式布局前端框架

(1) Bootstrap

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，在2011 年8月在 GitHub 上发布的开源产品，用于开发响应式布局、移动设备优先的 WEB 项目。

中文网址：https://v3.bootcss.com

(2) Amaze UI

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

中文网址：http://amazeui.shopxo.net/

当然还有好多优秀的响应式框架，算了不再一一介绍了，让开发自己玩去。

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

说了这么多，但是你给我一个网站我怎么判断它是不是响应式布局呢？

首先找来一个网站(https://segmentfault.com/)，然后按 “F12” 键，出现如下的开发者工作后，鼠标按住红**域不放，来回拖动，就能看到效果。

最后看下拖动GIF，看看响应式布局的魅力！

今天内容到此结束了，点击下方【阅读原文】查看更多技术知识点。

热门文章

产品经理需了解前端人员为什么使用组件/UI框架

你不懂API接口是什么?怎么和程序员做朋友

带你重新认识身边的前端工程狮