其他分享
首页 > 其他分享> > vue 开发H5适配方案

vue 开发H5适配方案

作者:互联网

一、通过JS实现适配

  1、清除浏览器默认样式

    创建reset.css,在main.js中importreset.css

  2、实现页面自适应(rem方式在750下1rem=100px),在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);
          }());
       export default {
          name: 'App',
          }
     </script>

二、通过postcss插件实现

  1、安装postcss-loader

    npm i postcss-loader --save-dev

  2、安装postcss-px-to-viewport

    npm install postcss-px-to-viewport --save-dev

  3、配置.postcssrc.js(如果没有该文件,在项目下新建一个)

    module.exports = {
      "plugins": {
          "postcss-import": {},
          "postcss-url": {},
          "postcss-px-to-viewport": {
              viewportWidth: 750,     //  视窗的宽度,对应的是我们设计稿的宽度,一般是750
              viewportHeight: 1334,    // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
              unitPrecision: 3,       //  指定`px`转换为视窗单位值的小数位数
              viewportUnit: 'vw',     // 指定需要转换成的视窗单位,建议使用vw
              selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
              minPixelValue: 1,       //  小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
              mediaQuery: false       // 允许在媒体查询中转换`px`
          },
          "cssnano": {
              preset: "advanced",
              autoprefixer: false,
              "postcss-zindex": false
          }
      }
   }

标签:vue,视窗,适配,px,H5,clientWidth,rem,var,postcss
来源: https://www.cnblogs.com/vofill/p/16598577.html