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

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

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

(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

手机网易网

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

原文地址:https://www.cnblogs.com/linewman/p/9918520.html