vue移动端适配-优快云博客

vue-cli3.0引入px2rem与lib-flexible 移动端适配

https://blog.youkuaiyun.com/qq_31393401/article/details/82353267

vue vue-cli @vue/cli将px转换成rem单位配置(flexible,px2rem)

https://blog.youkuaiyun.com/weixin_41424247/article/details/80867351

移动端适配vue-cli3.0

第一种方案(常用)——px转rem适配方案：

【1、使用pxtorem px转成rem】——让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
 yarn add lib-flexible 或者 npm install lib-flexible(建议用yarn，我用npm出错了，用yarn是可行的) 
【2、引入lib-flexible】
在main.js引入中：import 'lib-flexible/flexible.js'
【3、方案一：安装postcss-pxtorem】
yarn add postcss-pxtorem
然后在package.json内，在postcss内添加：
"postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 75,   // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
           "propList":["*"]   // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
},
【3、方案二：使用 npm install --save-dev postcss-loader postcss-px2rem】
在vue.config.js中配置：
module.exports = {
        css: {
        loaderOptions: {
               css: {
                       // options here will be passed to css-loader
               },
         postcss: {
                    // options here will be passed to postcss-loader
                    plugins: [require('postcss-px2rem')({
                              remUnit: 75
                    })]
               }
          }
      }
}
【4、在index.html中 添加如下代码】
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">

第二种方案——px转vw适配方案

【1、使用 postcss-px-to-viewport】注意：移动端用方便，不过在pc端会出新字体过大的现象
npm install  postcss-px-to-viewport 或者 yarn add  postcss-px-to-viewport 
【2、配置postcss-px-to-viewport】
package.json中，在postcss中添加代码：
"postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
         "viewportWidth": 750,
         "minPixelValue": 1
        }
    }
},
【3、在index.html中添加如下代码】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">

移动端适配vue-cli2.0

第一种方案：通过一串js代码实现

在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）
<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>

第二种方案：通过lib-flexible,px2rem-loader实现适配

【1、安装lib-flexible px2rem-loader】
yarn add lib-flexible       yarn add px2rem-loader
【2、在main.js中引入lib-flexible】
import 'lib-flexible/flexible.js'
【3、在 index.html 中添加：移动适配 meta标签】
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
【4、在 build/util.js 中 按如下更改3处】
①将px2rem-loader添加到cssLoaders中，②options中添加minimize
const cssLoader = {
  loader: 'css-loader',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }
 const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   //一般设置75
   remUnit: 35
  }
 }
③在generateLoaders方法中添加px2remLoader
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
   })
  })
 }

要修改的地方