青青子衿蹋盆，悠悠我心
一、amfe-flexible
1.首先把安裝amfe-flexible耗绿，這里使用npm install
nnpm i amfe-flexible -S
2.在項(xiàng)目入口文件main.js 中引入amfe-flexible
import 'amfe-flexible'
3.在根目錄的index.html 的頭部加入手機(jī)端適配的meta代碼
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
PostCSS介紹
Vue CLI 內(nèi)部使用了 PostCSS，默認(rèn)開啟了autoprefixer
配置方法
通過 .postcssrc 或任何 postcss-load-config 支持的配置源來配置 PostCSS。
1.在package.json配置
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
2.也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader鹅心。
//vue.config.js
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*'],
})
]
}
}
}
}
配置autoprefixer (瀏覽器前綴規(guī)則)
- 使用
package.json的 browserslist 字段 postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
配置 postcss-pxtorem
postcss-pxtorem會(huì)將px轉(zhuǎn)換為rem，rem單位用于適配不同寬度的屏幕纺荧，根據(jù)<html>標(biāo)簽的font-size值來計(jì)算出結(jié)果旭愧，1rem=html標(biāo)簽的font-size值。代碼中寫px單位宙暇，瀏覽器中從px轉(zhuǎn)換成了rem
npm install --save postcss-pxtorem
溫馨提示： remUnit這個(gè)配置項(xiàng)的數(shù)值是多少呢输枯？？占贫？ 通常我們是根據(jù)設(shè)計(jì)圖來定這個(gè)值桃熄，原因很簡(jiǎn)單，便于開發(fā)型奥。假如設(shè)計(jì)圖給的寬度是750瞳收，我們通常就會(huì)把remUnit設(shè)置為75，這樣我們寫樣式時(shí)厢汹，可以直接按照設(shè)計(jì)圖標(biāo)注的寬高來1:1還原開發(fā)螟深。
那為什么你在這里寫成了37.5呢？烫葬？界弧？那我們后面專門來講！
之所以設(shè)為37.5搭综，是為了引用像mint-ui這樣的第三方UI框架垢箕，因?yàn)榈谌娇蚣軟]有兼容px2rem ，將remUnit的值設(shè)置為設(shè)計(jì)圖寬度（這里為750px）75的一半兑巾，即可以1:1還原mint-ui的組件舰讹，否則會(huì)樣式會(huì)有變化，例如按鈕會(huì)變小闪朱。
既然設(shè)置成了37.5 那么我們必須在寫樣式時(shí)月匣，也將值改為設(shè)計(jì)圖的一半钻洒。
