Skip to content

Commit 3d36cca

Browse files
author
liang xiang hui
committed
版本维护
1 parent 9be8203 commit 3d36cca

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

step-03/README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,17 @@ flex(100, 1);</script>
2626

2727
### 如何使用?
2828
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`
3140
3. 对于图片的尺寸,如果是全屏图片,请保证其样式拥有以下设置
3241
```CSS
3342
.yourImg {

0 commit comments

Comments
 (0)