rem适配原理

rem适配原理

rem是指相对于根元素的字体大小的单位
em是指相对于父元素的字体大小的单位
rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

rem实现适配的原理

PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式
移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放

核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。

实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。

通过此方法，rem大小始终为width的n等分。

        // 动态为根元素设置字体大小
        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.即实现了百分比布局
4、tip：
　　1、以上代码需在dom之前写入（可放在head里面第一个script标签） 　　2、移动端加上meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5、使用体验：
　　我在项目中没有使用flexible.js等此类动态计算rem的插件。另外说明一点，此方法实现的功能也相对简单，只实现了最核心的动态修改rem的值。
　

function rem(){
    document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+'px';
}
rem()
window.onresize = rem;