响应式-自适应布局 · 要努力

[响应式布局原理与方案](https://juejin.im/post/5caaa230e51d452b672f9703) [Web自适应布局](https://juejin.im/post/5a22d0086fb9a0451a7631ee) ## 响应式设计与自适应设计的区别： >响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 ## 响应式设计是什么？响应式设计的原理是什么？如何兼容低版本IE？ **响应式设计**是指网站能够兼容多个终端，而不是为每一个终端特地去开发新的一个版本 **原理**通过媒体查询测试不同的设备屏幕尺寸做处理 **兼容低版本IE，页面头部必须有meta声明的viewport** ``` <meta name=“viewport” content=“width=device-width，initial-scale=1.maximum-scale=1，user-scalable=no”> ``` ## 布局题：自适应填补 **有一个高度固定的div，里面有两个div，一个高度100px，另一个填补剩下的高度** **方案一** 外层div使用`position:relative;`,要求高度自适用的div使用`position:absolute; top:100px; bottom:0; left:0` **方案二** 使用`flex`布局方式，高度自适应的div使用`flex:1` > (1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局（3）以淘宝首页为代表的 rem+viewport缩放（4）rem 方式 ## 1.Media Queries meida queries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： ``` @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ } ``` ## 2.Flex弹性布局以天猫的实现方式进行说明：它的viewport是固定的： `<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> ` 高度定死，宽度自适应，元素都采用`px`做单位。随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行 ## **3.rem + viewport 缩放** 这也是淘宝使用的方案，根据屏幕宽度设定`rem`值，需要适配的元素都使用`rem`为单位，不需要适配的元素还是使用`px`为单位。（1em = 16px）根据`rem`将页面放大`dpr`倍, 然后`viewport`设置为`1/dpr`. 如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素) 然后`viewport`设置为1/3, 这样页面整体缩回原始大小. 从而实现高清这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：`设备的物理分辨率/(devicePixelRatio * scale)` 在scale为1的情况下，`device-width = 设备的物理分辨率/devicePixelRatio ` 4、rem实现 viewport也是固定的： `<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">` `css`通过`sass`预编译，设置量取的`px`值转化`rem`的变量`$px: (1/100)+rem;` <div id="div3"> <h2> 实现移动端rem适配 </h2></div> rem（font size of the root element）：相对于根元素的字体大小的单位。 dpr： window.devicePixelRatio是设备上物理像素（实际）和设备独立像素(device-independent pixels (dips—css))的比例。 dpr= window.devicePixelRatio = 物理像素 / dips ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现移动端rem适配@cookie_fzx</title> <style> *{ margin: 0; padding: 0; } #box { width: 1rem; height: 1rem; background: pink; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> window.onload=function (ev) { // 获取屏幕区域的宽度 var width = document.documentElement.clientWidth; // 获取html var htmlNode = document.querySelector('html'); // 设置字体大小 htmlNode.style.fontSize = width + 'px'; } </script> </html> ```