当前位置：网站首页>Mobile pixel adaptation scheme

Mobile pixel adaptation scheme

2020-11-06 22:11:41 【The front end of the attack】

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

rem

1. stay public Public of folder html Add the configuration

principle ： Create and add in the root directory of the file font-size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
  <title>React App</title>
  <script>
    (function (w) {
      var doc = w.document;
      var docEl = doc.documentElement;
      var timer;

      function refersh() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) {
          width = 750;
        }
        var rem = width / 7.5;
        docEl.style.fontSize = rem + "px";
      }
      w.addEventListener('resize', function () {
        timer && clearTimeout(timer);
        timer = setTimeout(refersh, 400)
      })
      w.addEventListener('pageshow', function () {
        timer && clearTimeout(timer);
        timer = setTimeout(refersh, 400)
      })
    })(window)
  </script>

</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
 
</body>

</html>

2.

vm

vue-cli Automatic matching vm, Using third-party dependency packages

postcss-px-to-viewport stay vue.config.js Configuration in file ：

const pxtovw = require('postcss-px-to-viewport')

module.exports = {
  css: {
        loaderOptions: {
            css: {
                //  The options here are passed to  css-loader
            },
            postcss: {
                //  The options here are passed to  postcss-loader
                plugins: [
                    new pxtovw({
                        unitToConvert: 'px',
                        viewportWidth: 375,
                        unitPrecision: 5,
                        propList: ['*'],
                        viewportUnit: 'vw',
                        fontViewportUnit: 'vw',
                        selectorBlackList: [],
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: [/node_modules/]
                    })
                ]
            }
        }
    }
  }

版权声明
本文为[The front end of the attack]所创，转载请带上原文链接，感谢

边栏推荐

猜你喜欢

随机推荐