px转换rem给宽高设值 -- 坑（js）

px 像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的；

rem 是CSS3新增的一个相对单位，是以根元素的字体大小为基准计算的。

---

通常情况下px转换rem时都以1:100的比例来方便计算（UI图：750 举例）

// 根元素fs
const w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / (750 / 100) + 'px'

/* 元素: fs:30px，height:100px 
   1:100 转换：rem = px / 100
*/
.title {
    font-size: .3rem;
    height: 1rem;
}

 

 以上代码的效果是非常正常的，但本着小偷懒的想法，改为1:1的思路来操作，说干就干：

// 根元素fs
const w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / (750 / 1) + 'px'

.title {
    font-size: 30rem;
    height: 100rem;
}

 按正常想法这种操作应该是没问题的，但在某些浏览器或是安卓机中，就会发现title标签的高度换算出现问题了（以 iphone5/SE 为例）：

正常运算：标签高度（px）= 标签高度（rem）* 根元素（px）【即标签高度（px）：100rem * (320 / 750)px = 42.66667px】

某些浏览器或是安卓机：标签高度（px）= 1200px

 

最后总结：根元素的font-size不要小于12px，因为浏览器默认最小为12px，当小于时即默认为最小值。

但为什么 谷歌/iphone 都没有这种问题，暂时理解为浏览器之间的差异吧......如果知道原因请告诉我哦~