- rem的单位计算：
innerWidth/5所得到的值为1rem的大小；如果1rem的值不为整数，则采用四舍五入取整。 - 基于设计稿做布局开发时，以上面的
rem的计算方式，1rem等同于设计稿的150px； - 所有宽度的大小均用
%的形式去实现，宽度不采用rem做单位； - 对于需要根据屏幕大小进行适配的布局，其高度使用
rem单位； - 正常所使用的布局均采用
flex布局去做开发，减少浮动跟定位的使用；对于字体垂直居中，尽可能通过flex去实现，少使用line-height。（注：因为如果系统字体调整后，网页字体也会随之发生变化，所以定好的line-height会不准，导致字体无法正确垂直居中） - 对于不需要根据屏幕大小进行适配的布局，高度采用
px； - 对于通过
js动态添加的img，其高度不能使用rem单位。（注：因为在ios系统中，动态添加的图片如果高度使用的是rem单位，高度会失效，会变成0px） - 对于需要不能根据系统字体大小变化而变化的情况，
font-size采用pt单位，pt与px的转化为px-3 = pt，例如：12px = 9pt。大体转换比例就是这样，如果开发完后发现字体大小有误，可再进行微调。 - 对于1屏的高度且界面中不出现输入键盘弹起的情况，可使用
vh单位去实现1屏的高度。100vh为1屏的高度。（注：此处的1屏指的是网页视图显示的大小，并非等同于手机屏幕的高度，因为网页视图在app中不会等于手机屏幕的高度。）
h5开发总结-视图部分
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特...
