响应式布局方法总结

定义

响应式布局指的是同一页面在不一样屏幕尺寸下有不一样的布局。传统的开发方式是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图，经过媒体查询就能很方便的实现。

可是媒体查询的缺点也很明显，若是在浏览器大小改变时，须要改变的样式太多，那么多套样式代码会很繁琐。

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

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

height,width属性的百分比依托于父标签的宽高。可是，padding、border、margin等属性的状况又不同？

• 子元素的top和bottom若是设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，一样，子元素的left和right若是设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。
• 子元素的padding若是设置百分比，不管是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
• 子元素的margin若是设置成百分比，不管是垂直方向仍是水平方向，都相对于直接父元素的width
• border-radius不同，若是设置border-radius为百分比，则是相对于自身的宽度

缺点

• 计算困难，若是咱们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
• 各个属性中若是使用百分比，相对父元素的属性并非惟一的。好比width和height相对于父元素的width和height，而margin、padding无论垂直仍是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，形成咱们使用百分比单位容易使布局问题变得复杂。
• 因此，不建议用%来作响应式布局。

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

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的状况下，1vw都等于视图宽度的百分之一。

与百分比布局很类似，但更好用。

响应式布局方法四：rem

rem单位是相对于字体大小的html元素，也称为根元素。 默认状况下，html元素的font-size为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和媒体查询，在分辨率发生变换时，给它不一样的font-size。

优化版

//动态为根元素设置字体大小
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为width的1/10.即实现了百分比布局。就没有初版的媒体查询那样僵硬。

以上代码需在dom以前写入（可放在head里面第一个script标签）

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

其实，如今的主流UI框架都会考虑到响应式布局这个问题，好比elementUI，iview等框架提供了栅格系统，<row>搭配<col>来实现响应式布局。 因此在工做中直接拿来使用就完事了。

移动端响应式布局 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
复制代码

• width=device-width: 是自适应手机屏幕的尺寸宽度。
• maximum-scale:是缩放比例的最大值。
• minimum-scale:是缩放比例的最小值。
• inital-scale:是缩放的初始化。
• user-scalable:是用户的能够缩放的操做。

这个写法是用户不能缩放的页面设计。由于，若是页面能缩放的话，就会影响用户的体验，在手机端，咱们均可以找到点击的按钮或者本身感兴趣的菜单进行操做。其二：就是咱们若是让页面缩放的话，就彻底暴露了咱们手机app的程序是html的架构了。因此，咱们专为移动端的设计页面的时候，就不须要用户进行缩放了。

flexible.js

flexible.js是阿里手淘团队开发的。用来解决移动端的适配问题。

• 假设如今要适配一个iphone6的设备。

  • 设计师给了一个750px宽度的设计稿（注意这里是750px而不是375px）
  • 前端工程师用750px的这个比例开始还原
  • 把宽高是px的转换成rem
  • 字体使用px而不使用rem
  • flexible.js会自动判断dpr进行整个布局视口的放缩

  至于flexible.js怎么使用的能够自行搜索，由于本人移动端作得少，就再也不多说了。

参考文章

前端移动端适配总结

前端响应式布局原理与方案（详细版

响应式布局的经常使用解决方案对比(媒体查询、百分比、rem和vw/vh）

欢迎访问个人博客