vue2+webpack+vant搭建的H5在移动端适配问题

最新推荐文章于 2023-07-17 14:33:02 发布

坚持努力才最重要

最新推荐文章于 2023-07-17 14:33:02 发布

阅读量276

点赞数

分类专栏：前端 vue webpack 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_44996006/article/details/129655239

版权

vue 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

15 篇文章 2 订阅

订阅专栏

webpack

2 篇文章 1 订阅

订阅专栏

引入插件postcss-pxtorem，可自动将px转换为rem，rem和px的换算关系可以在public\index.html文件加上如下代码进行处理。

<script>
    (function () {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;
 
      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;
 
        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }
 
        document.querySelector('html').style.fontSize = rem + 'px';
      }
      set();
 
      window.addEventListener('resize', set);
    }());
  </script>