vue 移動端適配方案詳解

2019-11-19 12:30:42

字體：大中小

來源：轉載

供稿：網友

一、方法一：rem 布局

在主入口：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 插件實現

1、安裝插件

npm i lib-flexible --save    // 載lib-flexiblenpm install px2rem-loader    // 安裝px2rem-loader

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、在 index.html 中添加：移動適配 meta標簽

<meta name="viewport" content="width=device-width,initial-scale=1.0">//注意這兩個的區別，建議添加下面的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 中按如下兩更改

（1）、將px2rem-loader添加到cssLoaders中

const cssLoader = {  loader: 'css-loader',  options: {   minimize: process.env.NODE_ENV === 'production',   sourceMap: options.sourceMap  } } const px2remLoader = {  loader: 'px2rem-loader',  options: {   //一般設置75   remUnit: 35  } }

（2）、在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    })   })  }  // Extract CSS when that option is specified  // (which is the case during production build)  if (options.extract) {   return ExtractTextPlugin.extract({    use: loaders,    fallback: 'vue-style-loader'   })  } else {   return ['vue-style-loader'].concat(loaders)  } }

總結要修改的地方