美文网首页
H5页面布局

H5页面布局

作者: 米塔塔 | 来源:发表于2017-03-05 08:57 被阅读0次

页面布局:

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

相关文章

网友评论

      本文标题:H5页面布局

      本文链接:https://www.haomeiwen.com/subject/vdztgttx.html