vue/react中使用rem布局

最新推荐文章于 2024-07-27 10:48:03 发布

Shimmer-612

最新推荐文章于 2024-07-27 10:48:03 发布

阅读量1k

点赞数 2

分类专栏： vue 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_45892086/article/details/111572220

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

rem布局学习

rem是移动端布局，自适应屏幕常用的方法。

原理

1rem = 不同设备下fontsize的初始值

于是用rem做单位不同屏幕的元素大小就不一样，可以达到适配。

在vue/react项目public/index.html文件的头部添加以下代码

<script>
      fnResize();
      window.onresize = function() {
        fnResize();
      };
      function fnResize() {
        var deviceWidth =
          document.documentElement.clientWidth || window.innerWidth;
        if (deviceWidth >= 750) {
          deviceWidth = 750;
        }
        if (deviceWidth <= 320) {
          deviceWidth = 320;
        }
        document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
      }
    </script>