<table class="text">
<tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63 Meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no'); （2）动态计算html的font-size document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; （3）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10 （4）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。 （5）设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。 网易的法： （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-size:16px} } @media screen and (min-width:400px){ .m-navlist{font-size:18px} } 最后还有2个情况要说明： 第一，如果采用网易这种做法，视口要如下设置： 640) deviceWidth = 640; document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px'; 比较网易与淘宝的做法 共同点： 都能适配所有的手机设备，对于pad，网易与淘宝都会跳转到pc页面，不再使用触屏版的页面 都需要动态设置html的font-size 布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页面布局呈现等比变化 容器元素的font-size都不用rem，需要额外地对font-size做媒介查询 都能应用于尺寸不同的设计稿，只要按以上总结的方法去用就可以了 不同点 淘宝的设计稿是基于750的横向分辨率，网易的设计稿是基于640的横向分辨率，还要强调的是，虽然设计稿不同，但是最终的结果是一致的，设计稿的尺寸一个公司设计人员的工作标准，每个公司不一样而已 淘宝还需要动态设置viewport的scale，网易不用 最重要的区别就是：网易的做法，rem值很好计算，淘宝的做法肯定得用计算器才能用好了 。不过要是你使用了less和sass这样的css处理器，就好办多了，
