基于REM的适配移动端响应

最新推荐文章于 2024-05-17 17:40:41 发布

Amanda_wmy

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量203

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Amanda_wmy/article/details/89641498

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

基于REM的适配移动端响应

响应式适配
方法一：设计稿给什么尺寸，我们就将其缩小100倍，最后换算成rem单位。比如，设计稿上某个title的font-size为32px，此时写CSS样式时就直接缩小100倍，即0.32rem。
由于rem是根据根元素进行设置的，所以我们需要设置根元素的font-size。

//rem 转换
(function() {
  var html = document.documentElement;
  function onWindowResize() {
    html.style.fontSize = html.getBoundingClientRect().width / 7.5 + "px";
  }
  window.addEventListener("resize", onWindowResize);
  setTimeout(() => {
    onWindowResize();
  }, 500);
  onWindowResize();
})();