Skip to content

Commit 95aa2ae

Browse files
committed
修改REM视觉规范
1 parent 9f8410c commit 95aa2ae

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

mobile/rem.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# H5自适应方案规范
22
## 1 使用规范
3-
如果视觉稿存在以下两种情况,可以考虑使用自适应方案
3+
如果视觉稿存在以下两种情况,需考虑使用自适应方案
44
+ **稀疏布局**
55
某些元素的宽/高(或者是位置)需要随着页面的宽/高改变而改变,同时元素所在的行/列并没有被占满。比如某个按钮要居中显示,宽度是页面宽度的66%。而另一种情况,一行两个课程卡片分别占50%则不属于这种情况。
66

@@ -14,9 +14,10 @@ font-size小于12px的字体在3倍屏下面会显得很小,如果不想写med
1414

1515
+ 文字使用px单位,借助html元素上面的data-dpr属性写media query,只需要写3个,分别是dpr="1",dpr="2",dpr="3"。当视觉稿是320px的时候,度量出来的文字大小属于dpr="1";当视觉稿是640px或者750px的时候,度量出来的文字大小属于dpr="2";当视觉稿>1080px的时候,度量出来的文字大小属于dpr="3"。得到其中一个值,根据比例关系可换算得到另外两种情况的值,3个数值可做微调,但是文字大小最好是偶数
1616

17-
+ background-size一律设置为cover
17+
+ background-size的值设置为:cover
1818

19-
+ 在dpr=1/dpr=2中,课程封面图使用222尺寸。在dpr=3中,使用356尺寸。
19+
+ 课程封面图片选择
20+
在dpr=1/dpr=2中,课程封面图使用222尺寸。在dpr=3中,使用356尺寸。
2021

2122
+ 大图(比如背景图)需要使用多倍图。直接切出来的图是dpr=3的图,其余两个可以按比例缩放,也可以dpr=1/dpr=2共用1张图片(如果不关注图片大小)。注:大图在保持清晰度的前提下可做缩放。
2223

@@ -31,7 +32,7 @@ font-size小于12px的字体在3倍屏下面会显得很小,如果不想写med
3132
## 3 视觉规范
3233
+ 提供720px或者750px的视觉稿
3334

34-
+ 高清图让视觉另外给
35+
+ 视觉需要另外给出高清图
3536

3637
附:
3738
本规范具体的原理,实践与讨论请移步[H5自适应方案讨论贴](https://github.com/imweb/mobile/issues/3)

0 commit comments

Comments
 (0)