h5开发总结-视图部分
2018-08-09 本文已影响24人
程恺
- 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中不会等于手机屏幕的高度。）
