（十七）REM布局原理
1：基本概念
-
em - 当前对象内文本的字体大小相对单位 -
rem - 字体大小相对单位 -
物理像素 -
逻辑像素 -
设备像素比 - dpr -
<meta> 标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">layout viewport - 浏览器默认视口 - 可以显示PC界面clientWidth移动设备默认的viewportvisual viewport - 浏览器可视区域大小innerWidthideal viewport - 理想viewportiphone的ideal viewport宽度320pxinitial-scale - layout viewport相对于ideal viewport缩放比例取width和initial-scale中较大值initial-scale - 0.5 (左) - 1 (右)
2：适配设备屏幕 (移动端)
-
最终目标 - 设计稿等比缩放在设备上 -
动态处理Mate标签scale像素比 - 1 - scale=1像素比 - 2 - scale=2像素比 - 3 - scale=3获取设备的像素比
var devicePixelRatio = window.devicePixelRatio; var scale = 1 / devicePixelRatio; var metaElement = document.createElement('meta'); metaElement.setAttribute('name', 'viewport'); metaElement.setAttribute( 'content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' ); document.documentElement.firstElementChild.appendChild(metaElement); -
动态处理根节点font-sizevar rem = document.documentElement.clientWidth / 10 document.documentElement.style.fontSize = rem + 'px'
