移动端rem适配

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;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 现在回过头来看,感觉自己以前写复杂了,其实道理很简单; 就是利用vw,rem随屏幕,或者跟字体正比变化的特性; 1...
    会会会会阅读 43,213评论 16 40
  • 网上很多都说会pc网页开发,也就会了mobile网页开发。那么实际呢也是如此,但是对于新手来说却摸不着头脑无从下手...
    亚讯阅读 25,325评论 1 17
  • 三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...
    木利阅读 4,320评论 0 0
  • 文/一秋 01 与他相遇是在繁华街道,他对我淡淡一笑便迷了我的眼,回过神来他却早已离去,我呆呆的站在那,想着,若是...
    李一二蛋_阅读 2,713评论 1 1

友情链接更多精彩内容