常见的响应式布局,你知道哪几种响应式布局的方式

响应式布局有几种方法（响应式布局方法总结） 响应式布局方法总结 定义

响应式布局是指同一页面在不同的屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端开发一套，而使用响应式布局开发一套就够了。

优势

不同分辨率设备的灵活性，可以快速解决多设备显示适配的问题。

劣势

只适用于版面、信息、框架不复杂的部门网站，兼容各类设备。工作量大，效率低，代码繁琐，还会有隐藏的无用元素。其实这是一个折中的设计方案，受各种因素影响，无法达到最佳效果。一定程度上改变了网站原有的布局结构，用户会感到困惑。

响应式与自适应区别

响应式:只需要开发一套代码。响应式设计通过检测视口分辨率和为不同的客户端进行代码处理来显示不同的布局和内容。自适应:需要开发多套接口。通过检测视口分辨率，可以判断当前访问的设备为:pc、平板、手机，从而请求服务层，返回不同页面。

响应式布局方法一：媒体查询

使用@media媒体查询，可以为不同的媒体类型定义不同的样式，尤其是响应式页面。可以针对不同的屏幕尺寸编写多套样式，达到自适应的效果。例如:

@media screen and (max-width: 960px){ body{ background-color:#FF6699 }}@media screen and (max-width: 768px){ body{ background-color:#00FF66; }}@media screen and (max-width: 550px){ body{ background-color:#6633FF; }}@media screen and (max-width: 320px){ body{ background-color:#FFFF00; }}

上面的代码通过媒体查询定义了几种样式，并通过max-width设置了样式生效时的最大分辨率。上面的代码分别为分辨率为0 ~ 320px、320px~550px、550px~768px、768px~960px的屏幕设置了不同的背景颜色。

通过媒体查询，我们可以为不同分辨率的设备编写不同的样式，实现响应式布局。例如，我们为不同分辨率的屏幕设置不同的背景图片。比如小屏手机设置@2x图片，大屏手机设置@3x图片，通过媒体查询就可以轻松实现。

但是，媒体查询的弊端也很明显。如果浏览器大小变化时需要改变的样式太多，那么多套样式代码会很繁琐。

响应式布局方法二：百分比%

例如，当浏览器的宽度或高度发生变化时，通过百分比单位，浏览器中组件的宽度和高度可以随着浏览器的变化而变化，从而实现响应式效果。

高度、宽度属性的百分比取决于父标签的宽度和高度。但是，填充、边框、边距等属性的情况就不一样了？

如果设置了百分比，则子元素的顶部和底部相对于父元素的高度，采用直接非静态定位(默认定位)。类似地，如果设置了百分比，则子元素的左侧和右侧是相对于父元素的宽度，直接非静态定位(默认定位)。如果设置了子元素的填充百分比，无论是垂直还是水平，都是相对于直接父元素的宽度，与父元素的高度无关。如果子元素的边距设置为百分比，无论是垂直还是水平，都不同于直接父元素的width border-radius；如果边框半径设置为百分比，则它是相对于其自身宽度的。

劣势

计算很难。如果我们要定义一个元素的宽度和高度，必须根据设计草图将其转换为百分比单位。如果在每个属性中使用百分比，则相对于父元素的属性不是唯一的。例如，宽度和高度相对于父元素的宽度和高度，而边距和填充相对于父元素在垂直和水平方向上的宽度，边框半径相对于元素本身，等等。，这使得当我们使用百分比单位时，很容易使布局问题复杂化。因此，不建议将%用于响应式布局。

响应式布局方法三：vw/vh

css3中引入了一个新的单位vw/vh，它与视图窗口相关。vw表示相对于视窗的宽度，vh表示相对于视窗的高度。任何分层元素，当使用vw单位时，1vw等于视图宽度的百分之一。

类似于百分比布局，但更好使用。

响应式布局方法四：rem

Rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的字体大小是16px。因此，1rem = 16px。

头版

@media screen and (max-width: 414px) { html { font-size: 18px }}@media screen and (max-width: 375px) { html { font-size: 16px }}@media screen and (max-width: 320px) { html { font-size: 12px }}

使用rem和媒体查询，当分辨率改变时，给它一个不同的字体大小。

优化版本

//动态为根元素设置字体大小function init () { // 获取屏幕宽度 var width = document.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + 'px'}//首次加载应用，设置一次init()// 监听手机旋转的事件的时机，重新设置window.addEventListener('orientationchange', init)// 监听手机窗口变化，重新设置window.addEventListener('resize', init)

理解:上面的代码实现了无论设备的可视窗口如何变化，rem总是设置为宽度的1/10。也就是说，实现了百分比布局。没有第一版的媒体质疑那么生硬。

上面的代码应该写在dom之前(可以放在head的第一个script标签里)

利用UI框架实现响应式布局

其实目前主流的UI框架都会考虑响应式布局的问题。例如，elementUI和iview等框架提供了网格系统，

移动端响应式布局 viewport lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /gt;

Width=device-width:是自适应手机屏幕的尺寸宽度。Maximum-scale:是缩放比例的最大值。Minimum-scale:是缩放比例的最小值。Inital-scale:是缩放的初始化。用户可伸缩:用户的可伸缩操作。

这种写法是用户无法缩放的页面设计。因为，如果页面可以缩放，会影响用户的体验。在手机上，我们都可以找到点击的按钮或者感兴趣的菜单进行操作。第二，如果我们让页面缩放，就会完全暴露我们手机app的html架构。所以我们在为移动设计页面的时候，不需要用户缩放。

flexible.js

Flexible.js由阿里手淘团队开发。用于解决移动终端的适配问题。

现在假设你想适应一台iphone6设备。设计师给出了宽度为750px的设计稿(注意这里是750px而不是375px)。前端工程师开始用750px的比例还原，转换成宽高为px的rem字体而不是remflexible.js会自动判断dpr放大缩小整个布局视口。至于如何使用flexible.js，大家可以自己去搜，因为我在移动端做的不多，就不多说了。