1.最近项目的开发需要h5
的支持,h5
项目是和web
整合到一起,在一个地址发布,通过不同的路由来跳转到不同的页面。所以开发h5
的页面需要适配,但是由于和web
混合在一起,没有用vw
适配,而是考虑使用rem
来适配。
2.rem
是一个相对单位,相对于html
字体大小来确定,适配也比较简单且麻烦,给根节点html
设置字体大小,h5
和px
相关的都改用rem
,浏览器一般默认1rem
等于16px
,如果给html
设置字体大小,那么1rem
就等于html
设置的字体值。通常设计稿为750*1334
,所以以100比例(方便换算)来换算,给html
设置100px
,在h5
页面都使用像素值除以100加上rem
单位即可适配。
会有一个问题,在横屏的时候宽度不变。
html{
font-size:100px;//设置根节点字体大小,
}
div{
width:7.5rem;//750px/100
}
3.还有一种是给html
设置vw
的单位来进行适配,vw
是视窗的宽度,100vw
就等于浏览器的宽度。也能进行100比例的适配。(建议使用)
html{
font-size:13.333vw;//省略过
}
那么13.333vw
是怎么得到,有一个换算公式
100vw/750(设计稿宽度)*100(换算比例)=13.333333333333334vw;