vue项目px自动转rem

  • 安装 px2rem-loader
    cnpm i px2rem-loader --save-dev
  • 修改utils.js
    exports.cssLoaders = function (options) {
        
        ...
        <!--添加-->
        const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 100
        }
      }
      function generateLoaders (loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
      })
    }
    }
  • 重新运行即可，这里转换结果1rem =100px
    动态计算根节点的font-size 和dpr
<html lang="zh-CN" ">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Pragma" content="no-cache">
  <meta name="wap-font-scale" content="no">
  <meta name="applicable-device" content="mobile">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover">
  <title>二维码生成器</title>
  <script type="text/javascript">(function () { var b = document.createElement("meta"); b.setAttribute("name", "viewport"); var c = window.devicePixelRatio, a = c ? 1 / c : 1; window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1); document.documentElement.setAttribute("data-dpr", c || 1); window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover") : b.setAttribute("content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover"); document.head.appendChild(b) })();</script><meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, viewport-fit=cover">
  <script type="text/javascript">var dpr = document.documentElement.getAttribute("data-dpr") || 1, width = document.documentElement.offsetWidth, fontSize = 100 / 750 * width; document.querySelector("html").style.fontSize = fontSize + "px"; window.addEventListener("resize", function () { var a = 100 / 750 * document.querySelector("html").offsetWidth; document.querySelector("html").style.fontSize = a + "px" });</script>
  </head>
posted @ 2020-04-02 14:00  ✔️zhangfl_go  阅读(119)  评论(0)  编辑  收藏  举报