跳至主要內容

Web移动端适配的一些思考

zfh原创开发日志CSS大约 1 分钟约 300 字...

最近,看了之前写的移动端商城项目,看到了当时写的rem适配的代码,觉得有问题,查了些资料,输出一些我的思考。

这是当时的代码:

html {
  font-size: 100px;
}
body {
  font-size: 0.12rem;
}

rem是指相对于根元素的字体大小的单位。比如上面的代码我们设置html的字体大小为 100px;那1rem=100px;12px=0.12rem;那实际上我们的html字体大小并不会随着设备的视口宽度自动变化,因为它永远是 100px;那如何动态进行设置了。找了网上很多资料,觉得vw+rem方案是最简单的:

html {
  font-size: 26.6666666667vw;
}
body {
  font-size: 0.12rem;
}

这个 26.6666666667 是怎么来的,1vw是代表当前浏览器视口宽度window.innerWidth的 1%,注意这里要以设计稿的大小进行计算,比如我这个项目的设计稿的宽度为 375px(对应 100vw),那 1px就是 100/375vw,100px就是(100/375)*100vw(26.6666666667vw);那我们切换成其他设备的时候,font-size就会动态变化

上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器