方案一：amfe-flexible+px2rem-loader
amfe-flexible：根據裝置寬度，修改根元素html的大小，以適配不同終端
px2rem-loader：將css中的px轉為rem單位，用了它就不用自己計算rem值了
注意：amfe-flexible是lib-flexible的優化，主要區別是amfe-flexible不會改變視口大小
安裝 + 配置
1. 安裝amfe-flexible和px2rem-loader
npm install -s amfe-flexible
npm i px2rem-loader --save -dev
複製程式碼2. 配置amfe-flexible
// 入口檔案main.js中引入
import 'amfe-flexible/index.js'
複製程式碼// 在index.html中修改meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製程式碼amfe-flexible幹了什麼呢？
- 給元素動態改寫font-size的值
- 設定1rem = viewWidth / 10
- 設定頁面重新整理時重置rem
- 支援0.5px
3. 配置px2rem-loader
// build/utils.js
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //預設換算為1rem為75px，可根據你的原型圖修改
}
}
// 在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)
}
}
複製程式碼4. 展示效果
-
iPhoneX（螢幕寬度為375px）
-
iPhone6/7/8 plus（螢幕寬度為375px）
-
iPad（螢幕寬度為768px）
方案二：vw實現移動端適配
外掛介紹
1. postcss-aspect-ratio-mini
主要用來處理元素容器寬高比。
如果我們想要做一個188:246（188是容器寬度，246是容器高度）這樣的比例容器，只需要這樣使用：
[w-188-246] {
aspect-ratio: '188:246';
}
複製程式碼有一點需要特別注意：aspect-ratio屬性不能和其他屬性寫在一起，否則編譯出來的屬性只會留下aspect-ratio的值。主要是因為在外掛中做了相應的處理，不在每次呼叫aspect-ratio時，生成前面指定的預設樣式程式碼，這樣程式碼沒那麼冗餘。所以在使用的時候，需要分開來寫：
// 編譯前
[w-188-246] {
width: 188px;
background-color: red;
}
[w-188-246] {
aspect-ratio: '188:246';
}
複製程式碼// 編譯後
[w-188-246] {
width: 25.067vw;
background-color: red;
}
[w-188-246]:before {
padding-top: 130.85106382978725%;
}
複製程式碼2. postcss-px-to-viewport
postcss-px-to-viewport主要用來把px單位轉換為vw、vh、vmin或者vmax這樣的視窗單位。
目前出視覺設計稿，我們都是使用750px寬度的，那麼100vw = 750px，即1vw = 7.5px。在不想要把px轉換為vw的時候，首先在對應的元素（html）中新增配置中指定的類名.ignore或.hairlines(.hairlines一般用於設定border-width:0.5px的元素中)
// 編譯前
.test {
border: .5px solid black;
border-bottom-width: 4px;
font-size: 14px;
line-height: 20px;
position: relative;
}
[w-188-246] {
width: 188px;
}
複製程式碼// 編譯後
.test {
border: .5px solid #000;
border-bottom-width: .533vw;
font-size: 1.867vw;
line-height: 2.667vw;
position: relative;
}
[w-188-246] {
width: 25.067vw;
}
複製程式碼3. postcss-write-svg
postcss-write-svg外掛主要使用的是border-image和background來做1px的相關處理。
- border-image方式：
// 編譯前
@svg 1px-border {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.example {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
複製程式碼// 編譯後
.example {
border: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
複製程式碼- background-image方式：
// 編譯前
@svg square {
@rect {
fill: var(--color, black);
width: 100%;
height: 100%;
}
}
#example {
background: white svg(square param(--color #00b1ff));
}
複製程式碼// 編譯後
#example {
background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
複製程式碼4. postcss-cssnext
主要用來讓我們使用CSS未來的特性，其會對這些特性做相關的相容性處理。
5. cssnano
cssnano主要用來壓縮和清理CSS程式碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己載入它。不過你也可以使用postcss-loader顯式的使用cssnano。
cssnano整合了一些其他的PostCSS外掛，如果你想禁用cssnano中的某個外掛的時候，可以像下面這樣操作：
"cssnano": {
autoprefixer: false,
"postcss-zindex": false
}
複製程式碼6. postcss-viewport-units
postcss-viewport-units外掛主要是給CSS的屬性新增content的屬性，配合viewport-units-buggyfill庫給vw、vh、vmin和vmax做適配的操作。
安裝 + 配置
1. 安裝PostCSS外掛
預設PostCSS外掛（通過Vue-cli構建的專案預設安裝了）：
- postcss-import：主要用來處理@import引入路徑問題。
- postcss-url：主要用來處理檔案，比如圖片檔案、字型檔案等引用路徑的處理。
- autoprefixer：主要用來處理瀏覽器字首問題。
npm i postcss-import --S
npm i postcss-url --S
npm i autoprefixer --S
複製程式碼其他PostCSS外掛：
- postcss-aspect-ratio-mini：主要用來處理元素容器寬高比。
- postcss-px-to-viewport：主要用來把px單位轉換為vw、vh、vmin或者vmax這樣的視窗單位。
- postcss-write-svg：主要使用的是border-image和background來做1px的相關處理。
- postcss-cssnext：主要用來讓我們使用CSS未來的特性，其會對這些特性做相關的相容性處理。
- cssnano：主要用來壓縮和清理CSS程式碼。
- postcss-viewport-units：主要用來給CSS的屬性新增content的屬性，配合viewport-units-buggyfill庫給vw、vh、vmin和vmax做適配的操作。
npm i postcss-aspect-ratio-mini --S
npm i postcss-px-to-viewport --S
npm i postcss-write-svg --S
npm i postcss-cssnext --S
npm i postcss-viewport-units --S
npm i cssnano --S
複製程式碼2. 配置PostCSS外掛
// 根目錄下的.postcssrc.js
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"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`
}
"postcss-viewport-units":{},
"cssnano": {
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
}
}
}
複製程式碼// 在index.html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
複製程式碼什麼情況下適合使用vw呢？
- 容器適配，可以使用vw
- 文字的適配，可以使用vw
- 大於1px的邊框、圓角、陰影都可以使用vw
- 內距和外距，可以使用vw
3. 展示效果
-
iPhoneX（螢幕寬度為375px）
-
iPhone6/7/8 plus（螢幕寬度為375px）
-
iPad（螢幕寬度為768px）
