手淘双11移动页面之移动设备全方面适配方案学习笔记

<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

2.会给html标签添加data-dpr=“2” 根据设备添加屏幕像素比，区分普通屏幕retina屏 3倍retina屏 html font-size会设置成为屏幕宽度的1/10，不同设备不一样，但是都是1/10 3.rem技术方案 所有元素的尺寸大小，边距，行高等都使用rem 相对宽度来表达 整个页面的宽度是10rem，1rem就等于屏幕宽度的1/10.这样就为不同移动设备的页面开发带来方便的等比缩放能力，所有元素的大小设定都使用针对html标签的font-size比例来计算 1 rem=html font-size = screen width/10 = flexible.js提供 ? 三、如何计算元素大小，宽高 1rem=屏幕宽度/10 在现实之中 设计师是按照750px的宽度来设计页面的。 因为理想的机型是iphone6 375dp的物理像素宽，retina屏就是750（css） 750px=10rem 针对设计稿 ? 我们使用ps量出的像素/750 *10=最终的rem photoshop像素/75=rem ? http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="text">