H5页面布局

页面布局:

1、流体布局:

%分比+float布局

弹性盒子

思路:宽度是百分比,高度自适应

缺点:和设计图整体感觉不太一样

2、定宽布局:

直接切成320

缺点:超过320的两边会有路边

min-width:320

max-widht:640

思路:宽度百分百,加最大值最小值,高度内容撑开

jd

3、相对单位布局

%  相对父级宽度

em  相对父级的字体大小

---

vw  相对可视区宽度

vh

v viewport

1vw=1%可视区宽度

vmax

相对于可视区宽度高度重最大的一个

vmin

相对于可视区宽度高度重最小的一个

rem root element of font-size

html的字体大小

10px=62.5%

pc端chrome里面自小字体是12,真机移动端没有问题

20

50

找一个基准

320

5 320    20

6 375  ?            23.4375

6p 414  ?            25.875

在不同的机器上改变html的字体大小

document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320

设计师的图纸 2倍或者3倍或者1.5

图纸640

重点:*****

1、先看图纸是几倍图  320 2

2、计算时候,量出的数/几倍/html字体大小

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容