当前位置：网站首页>移动端像素适配方案

移动端像素适配方案

2020-11-06 22:11:00 【进击的前端】

5行代码，即可让微信小程序上架到自己的APP中 | 注册送大疆、华为、樱桃键盘！>>>

rem

1. 在 public文件夹的公共html添加配置

原理：在文件的根目录生成添加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 自动匹配vm， 使用第三方依赖包

postcss-px-to-viewport 在vue.config.js文件中配置：

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

module.exports = {
  css: {
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            postcss: {
                // 这里的选项会传递给 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/]
                    })
                ]
            }
        }
    }
  }

版权声明
本文为[进击的前端]所创，转载请带上原文链接，感谢
https://my.oschina.net/u/4618999/blog/4706901

边栏推荐

猜你喜欢

随机推荐