web app 自适应方案总结关键字弹性布局之rem

本文主要是介绍web app 自适应方案总结关键字弹性布局之rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

现在移动端 web app 的自适应布局的方案有 5种。

零. Flexbox

使用css3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。

一. 弹性布局

使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是相对父级元素的原因没有得到推广。

二. 流式布局（Fluid）

使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）

三. 响应式布局（Responsive）

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四. 自适应布局（ Adaptive）

通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。

这篇文章主要讲的是rem的使用。

css3 中引入了新的长度单位，rem。官方定义 font size of the root element

rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。（IE6-8不支持不过考虑是移动端web app ）

1.针对设计稿计算rem

所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ，但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了，（CSS 预处理工具可以使用默认值）

  html { font-size :  62.5% ; /*10 ÷ 16 × 100% = 62.5%*/ } 
 body { font-size :  1.4 rem; /*1.4 × 10px = 14px */ } 
 h 1  {  font-size :  2.4 rem; /*2.4 × 10px = 24px*/ } 
 

所以如果我有一个宽度为640的设计稿，通过上面的方法算出对应元素rem的大小　。（附注：实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）

2。针对不同分辨率计算font-size

监听浏览器更改 html的font-size

  ( function  (doc, win) { 
    var  docEl = doc.documentElement, 
      resizeEvt =  'orientationchange'  in  window ?  'orientationchange'  :  'resize' , 
      recalc =  function  () { 
        var  clientWidth = docEl.clientWidth; 
        if  (!clientWidth)  return ; 
        docEl.style.fontSize = 20 * (clientWidth / 320) +  'px' ; 
      }; 
    if  (!doc.addEventListener)  return ; 
    win.addEventListener(resizeEvt, recalc,  false ); 
    doc.addEventListener( 'DOMContentLoaded' , recalc,  false ); 
 })(document, window); 
 