File tree Expand file tree Collapse file tree 1 file changed +5
-4
lines changed
Expand file tree Collapse file tree 1 file changed +5
-4
lines changed Original file line number Diff line number Diff line change 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 )
You can’t perform that action at this time.
0 commit comments