产品总监可能需要了解第三个技术知识点：什么是响应式布局？ 响应式布局实现原理等问题？
1.什么是响应式布局
2.响应式布局的实现
3.响应式布局和自适应布局的区别
4.主流响应式布局后端框架
5、如何检测网站是否是响应式布局
1.什么是响应式布局
响应式布局（Responsive design）是Ethan Marcotte在2010年5月提出的概念。简而言之，一个网站可以兼容多种不同屏幕规格的终端，即响应式布局的重点是手动适应移动终端。 、平台、PC端html 响应式布局，而不是为每个终端制作特定的版本。
传统的开发方式是在PC端开发一套，在移动端开发一套，甚至在平板上开发一套，但只要一套就足以使用响应式布局。 缺点是CSS文件可能比较重。 下图示例展示了同一个响应式网站如何在不同屏幕规格的终端上显示不同的布局和内容。
理论上，您必须在响应式布局中考虑数百种不同的状态。 尽管大多数州之间存在微小差异，但仍然算作差异。 它使得掌握设计的最终功效变得更加困难，并且也使得响应式布局越来越难以测试和预测。
但在实际开发过程中不可能考虑这么多种类。 为此，请继续阅读下面“屏幕尺寸分割点”的详细介绍。 下面，我们来看看响应式布局的优缺点：
优势
（1）跨平台、跨终端，无需分配子域名； 我们常见的看到的是pc端是一个域名，移动端一般是m.xxx.com的域名。
（2）能够快速解决多设备显示适配问题，甚至是未来设备；
(3)一定程度上减少开发的工作量，不要高兴得太早也可能会增加工作量。
缺点
（1）兼容性问题：如果使用CSS3媒体查询开发网站，不兼容低版本浏览器，比如低版本IE浏览器，但是有一定的解决办法。
(2)可以加载更多的样式和脚本资源；
（3）响应式布局不适合业务复杂、布局多样化的网站，例如电商平台；
2.响应式布局的实现
我们在里面了解了响应式布局，那么技术在实际项目中是如何实现响应式布局的呢？ 实现响应式布局的方案有很多，介绍几种常用的方案：
(1)百分比布局：通过比例单位，可以使浏览器中组件的宽度和高度随着浏览器的高度而变化，从而达到响应式的效果。
（2）rem布局：rem单位是相对于根元素html的font-size来确定的。 当页面大小发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素大小也会随之变化。
（3）Viewport单位：css3中引入了一个新的单位vw/vh，与视图窗口相关。 vw表示相对于视图窗口的长度，vh表示相对于视图窗口的高度。
以上解决方案都比较专业。 作为产品总监，看看它们是件好事。 就让开发者自己去玩吧。 我们来说说更容易理解的解决方案——CSS3中的Media Query。
媒体查询是制作响应式布局的神器。 上面也提到了它们会兼容低版本浏览器。 我们来谈谈媒体查询是如何实现的。
媒体查询允许我们为不同的媒体类型定义不同的样式。 当重置浏览器窗口大小时，页面也会根据浏览器的长度和高度手动重新渲染。
无论采用哪种方案来实现响应式，都会存在一个问题：屏幕尺寸分割点如何选择？ 市场上不同品牌终端的屏幕规格参差不齐，这也给响应式布局带来了一些麻烦。
我们先来看看经典的响应式布局框架。 Bootstrap是如何拆分的？
从上图可以看出，Bootstrap提供了一组支持5种屏幕尺寸范围的代码。
但也可以这样定义：480px、800px、1400px、1400px。
还可以这样划分：600px、900px、1200px、1800px，可适配14种常见型号。
以上几种切分方案仅供参考，您应该根据项目的实际情况进行定制。 媒体查询的主要功能是获取设备的宽度和高度，并设置不同屏幕规格下的样式、布局和内容。
就像下面的代码示例一样：我们可以为各种型号的iPhone、IPAD、PC定义不同的样式和布局，当设备的长度达到所需范围时html 响应式布局，就会显示预设的样式、布局和内容。
/* 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;}}
3.响应式布局和自适应布局的区别
自适应布局是指一种新的网页设计方法和技术，可以使网页自适应地显示在不同尺寸的终端设备上。 需要开发多套接口来适应不同的终端。 与响应式布局的区别如下：
（1）自适应布局通过测量该层的比特率来确定当前访问的设备：pc、平板、手机，从而请求服务层并返回不同的页面，只考虑几种不同的状态；
举一个反例：我们在PC端浏览一个网站，然后缩小窗口，刷新页面。 这时我们可能会看到网站的二级域名以“m”开头，这意味着它是移动端。
响应式布局衡量的是图层的比特率，但要考虑数百种不同的状态（理论上），并且实际上在客户端针对不同的客户端进行代码处理以突出显示不同的布局和内容。
（2）自适应布局需要开发多套界面，而响应式布局只需要开发一套界面。
（3）自适应 页面的屏幕自适应是在一定范围内的：例如PC端通常小于1024像素，手机端大于768像素。 响应式布局是一组全部适应的页面。
响应式网站：（移动端）（PC端）
响应式网站：
4.主流响应式布局后端框架
(1)引导程序
Bootstrap 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发。 它是 2011 年 8 月在 GitHub 上发布的开源产品，用于开发响应式布局和移动优先 WEB 项目。
中文网站：
(2) 惊奇用户界面
Amaze UI以联通优先（移动优先）为理念，从小屏逐步扩展到大屏，最终实现全屏适配，适应联通互联网时尚。
中文网站：
当然优秀的响应式框架还有很多，就不一一介绍了，让开发自己发挥吧。
5、如何检测网站是否是响应式布局
说了这么多，但是如果给我一个网站，我如何判断它是否是响应式布局呢？
首先找到一个网站（），然后按“F12”键。 出现如下开发作品后，将鼠标按住黑色区域，来回拖动即可查看效果。
最后看一下拖动GIF，看看响应式布局的魅力！
发表评论