File tree Expand file tree Collapse file tree 1 file changed +11
-2
lines changed Expand file tree Collapse file tree 1 file changed +11
-2
lines changed Original file line number Diff line number Diff line change @@ -26,8 +26,17 @@ flex(100, 1);</script>
26
26
27
27
### 如何使用?
28
28
1 . 只需要把上面的js代码放到head里面就行了。
29
- 2 . 将你的效果图等比例缩放至640px宽,然后量取效果图上的元素尺寸,用rem做单位进行布局
30
- 比如某个元素宽35px,样式写为` width: 0.35rem ` 。
29
+ 2 . 将设计师给你的效果图(效果图的宽度一般情况下只有三种,640px, 750px, 1442px,
30
+ 如果你的效果图属于前两种,那就直接按照效果图上标注的尺寸来布局,
31
+ 如果属于第三种,你可能需要把你的效果图宽度等比例缩放至812之后再按照上面标注的尺寸来布局
32
+ 第三种之所以这样,是因为此宽度是按照 Iphone 6 Plus 的尺寸给的,此设备的css宽度为414,dpr为3,
33
+ 所以它的物理像素宽度为 414 * 3 = 1242。而我们的这个高清布局代码默认 1rem=100px,设备对应的 dpr=2,
34
+ 这也就是为什么宽度为640,750的效果图为什么可以直接在上面量取尺寸的原因,
35
+ 就是因为640是按照 Iphone 5 的尺寸来的(设备的css宽度为320,dpr=2, 320 * 2 = 640)
36
+ 而750是按照 Iphone 6 的尺寸来的(设备的css 宽度为 375,dpr=2, 375 * 2 = 750)
37
+ )
38
+ 然后量取效果图上的元素尺寸,用rem做单位进行布局
39
+ 比如你量取某个元素宽35px,样式写为` width: 0.35rem ` 。
31
40
3 . 对于图片的尺寸,如果是全屏图片,请保证其样式拥有以下设置
32
41
``` CSS
33
42
.yourImg {
You can’t perform that action at this time.
0 commit comments