rem布局原理和优缺点

4,871 阅读1分钟

blog.csdn.net/qq_36263601…

1.rem的原理:
    (1)本质其实就是等比缩放
    (2)clientWidth/UI图宽度  这个是缩放比
    (3)dom快高*clientWidth/UI图宽度  这个就是dom的实际宽高
但是这样每次都这么做很麻凡,不如直接找出一个单位来公用,于是rem就出现了
-----------方法:
可以发现,如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化
---------------这里让分子缩小了100倍,那么计算rem的时候就让分子增大一百倍
document.documentElement.style.fontSize = document.documentElement.clientWidth /(中间比例) 100 + 'px'; 
---------------那么如何把UE图中的获取的像素单位的值,转换为已rem为单位的值呢---------------
公式是(元素宽度 / UE图宽度 *中间比例100),
让我们举个例子,假设UE图尺寸是640px,UE图中的一个元素宽度是100px
根据公式100/640*100 = 15.625