前端自适应----单位rem

Rattenking

发布于 2021-01-29 08:10:59

85600

代码可运行

文章被收录于专栏：RattenkingRattenking

运行总次数：0

代码可运行

下边是大神对《移动前端自适应解决方案和比较》的链接：移动前端自适应解决方案和比较

通过使用，自我感觉网易的解决方案是最方便我们使用时候的计算。代码：

(function(factory){
   factory();
    window.addEventListener('resize',factory,false);
}(function(){
    var width = document.documentElement.clientWidth;
    width = width > 750 ? 750 : width;
    document.documentElement.style.fontSize = width / 7.5 + 'px';
}))

注意： 1. 上边解决方案，采用是750的psd设计（并不是网易的640），按照个人公司要求。 2. 此处1rem代表的是width / 7.5 + ‘px’的结果，也就是750的100px，当我们在实际操作的时候，直接用(实际的值/100)，就是我们需要的rem值。（比如某个字体在750psd是40px，那么你设置的时候font-size就是0.4rem。）

DEMO

手机网易网

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/11/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站