適配配置完成后需重啟項目才會生效
移動端適配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、方案一：使用npm或yarn 安裝 如 npm install --save-dev postcss-loader postcss-px2rem】(推薦此方案)
然后在配置文件中配置，(我是在根目錄創建vue.config.js並在其中配置的，也可在package.json中配置)
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
})]
}
}
}
}
【3、方案二：安裝postcss-pxtorem】
yarn add postcss-pxtorem
如果你的配置文件是package.json(在你創建vue項目時，會讓你選擇配置文件)，則在package.json內，添加postcss：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 設計稿寬度的1/10,（JSON文件中不加注釋，此行注釋及下行注釋均需要刪除）
"propList":["*"] // 需要做轉化處理的屬性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
},
如果你的配置文件是自定義配置文件，則你可以在根目錄下創建配置文件vue.config.js，並配置如下信息
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75,
"propList":["*"]
}
}
}
}
}
}
【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
第一種方案(常用)：通過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還是37.5還是其他，具體數值根據ui圖來
remUnit: 37.5
}
}
③在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
})
})
}
要修改的地方
第二種方案：通過一串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>
PC端適配
PC端使用此種方法進行適配，只需改進一個地方即可，如下(另外remUnit改成192或設計稿比例)
找到/node_modules/lib-flexible/flexible.js，並修改其代碼如下
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
- width = 540 * dpr; //原本是屏幕寬度>540時則寬度固定為540
+ width = width * dpr; //現在是寬度>540時則以當前寬度為准
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
提個醒：
1、個人發現每次在安裝新的babel相關包的時候，webpack會自動把width=width*dpr改回到540*dpr，從而造成頁面排版問題。
這里要注意一下，再改成width*dpr即可
2、在做了此屏幕適配處理后，IE,Microsoft Edge等瀏覽器會不識別1px這種的轉化。所以在用到1px時請使用/*no*/注釋掉，不讓其轉化。
如border: 1px solid #ccc; /*no*/
3、另外注意到一個問題，如在引入組件庫時，比如antd-vue組件庫時，
我們也需要將組件庫的css文件里帶1px的樣式后面加/*no*/注釋掉。以保證IE等瀏覽器也可完美適配。
如antd-vue的css文件在/node_modules/ant-design-vue/dist/antd.css
提個醒
=== postcss-pxtorem中不進行轉換 ===
通過配置規則和單位使用Px或PX來解決：
如： border:1PX solid #fff;border:1Px solid #fff;
=== postcss-px2rem中不進行轉換 ===
通過注釋解決：
1、當你遇到1px的邊框時，通常容易發現頁面缺失部分邊框，這時你可以使用/*no*/語法來屏蔽該屬性轉換，
例如：border: 1px solid red; /*no*/
2、由於字體的特殊性，我們在編譯font-size屬性時，通常不使用rem單位，這時候你可以這樣使用：
例如：font-size: 24px; /*px*/