方案一：amfe-flexible+px2rem-loader
amfe-flexible：根據(jù)設備寬度赔硫，修改根元素html的大小，以適配不同終端
px2rem-loader：將css中的px轉為rem單位，用了它就不用自己計算rem值了
注意：amfe-flexible是lib-flexible的優(yōu)化门怪，主要區(qū)別是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干了什么呢痰憎？
- 給元素動態(tài)改寫font-size的值
- 設置1rem = viewWidth / 10
- 設置頁面刷新時重置rem
- 支持0.5px
3. 配置px2rem-loader
// build/utils.js
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //默認換算為1rem為75px票髓，可根據(jù)你的原型圖修改
}
}
// 在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）
image -
iPhone6/7/8 plus（屏幕寬度為375px）
image -
iPad（屏幕寬度為768px）
image
方案二：vw實現(xiàn)移動端適配
插件介紹
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, // 視窗的高度澎怒，根據(jù)750設備的寬度來指定，一般指定1334阶牍，也可以不配置
unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數(shù)位數(shù)（很多時候無法整除）
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）
image iPhone6/7/8 plus（屏幕寬度為375px）
- iPad（屏幕寬度為768px）
image
