移动前端自适应解决方案和比较

正文

请到「今天看啥」查看全文

- size = 500 / 6.4 = 78.125px

事实上网易就是这么干的，你看它的代码就知道，body元素的宽是：

根据这个可以肯定它的设计稿竖着时的横向分辨率为640。然后你再看看网易在分辨率为320* 680，375* 680，414* 680，500* 680时，html的font-size是不是与上面计算的一致：

这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这个6.4怎么来的，当然是根据设计稿的横向分辨率/100得来的。下面总结下网易的这种做法：

• （1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：
  如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
  如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

• （2）布局时，设计图标注的尺寸除以100得到css中的尺寸，比如下图：

• 

播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！

• （3）在dom ready以后，通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

6.4只是举个例子，如果是750的设计稿，应该除以7.5。

• （4）font-size可能需要额外的媒介查询，并且font-size不能使用rem，如网易的设置：

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}
 
@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-

请到「今天看啥」查看全文