美文网首页
移动端rem适配

移动端rem适配

作者: 光头小青蛙 | 来源:发表于2019-09-29 10:09 被阅读0次

1.最近项目的开发需要h5的支持,h5项目是和web整合到一起,在一个地址发布,通过不同的路由来跳转到不同的页面。所以开发h5的页面需要适配,但是由于和web混合在一起,没有用vw适配,而是考虑使用rem来适配。
2.rem是一个相对单位,相对于html字体大小来确定,适配也比较简单且麻烦,给根节点html设置字体大小,h5px相关的都改用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;

相关文章

网友评论

      本文标题:移动端rem适配

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