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字体大小