web app 自适应弹性布局之rem

时间 2019-11-16

标签 web app 自适应弹性布局 rem 栏目 HTML 繁體版

原文原文链接

关于rem，主要参考文档javascript

1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html)css

2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem html

如今移动端 web app 的自适应布局的方案有 5种。java

零. Flexboxcss3

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

一. 弹性布局chrome

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

二. 流式布局（Fluid）app

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

三. 响应式布局（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);

配合css预处理工具计算 rem 值。 Sass、LESS 、Stylus

web app 自适应 弹性布局之rem

web app 自适应弹性布局之rem