关于rem自适应小白问题求解答？

  • Z时代
  • 2024-02-21
  • 分类：IT

假设设计稿是1920,我想适配每个屏幕，是不是动态改变html的fontsize,font-size =document.width/10份,假设设计稿有一个盒子100x100,在css文件中他的大小应该写成（100/font-size） rem,

回答：

理解的是差不多，但是计算html的font-size不对，应该初1920，就是你的设计图大小，也就是基准值，具体操作可以这样:

html{
  font-size: calc(100vw / 19.2);
}

“19.2”表示设计稿的宽度为1920px，“100vw”表示视口宽度的百分比，因此计算结果为每个CSS像素占满1/10的视口宽度。然后在CSS文件中指定盒子的大小可使用rem单位，大小是设计图的大小除10：

.box{
  width: 10rem;
  height: 10rem;
}

回答：

REM自适应方案会有些其他的衍生问题。其实如果你确定是要 width / 10 的话，直接用 10vw 就好了呀。

如果要用的话，可以直接用1楼的方法就行了。

早年比较火的 flexible 以及 px2rem 等方案已经都是处于废弃状态了。仓库内有一段这样的说明：

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。

相关阅读
#使用视口单位实现响应式排版 | 响应式设计 - 学习 Web 开发 | MDN
CSS 的值与单位 - 学习 Web 开发 | MDN

回答：

用postcss + postcss-pxtorem吧，不然每次都要自己去计算太麻烦了

以上是 关于rem自适应小白问题求解答？ 的全部内容， 来源链接： utcz.com/p/934252.html

回到顶部