這篇文件是以應(yīng)用的角度介紹如何使用vue（使用vue-cli創(chuàng)建項(xiàng)目）來(lái)設(shè)置響應(yīng)式布局，讓我們能更便捷使用px去開(kāi)發(fā)還原設(shè)計(jì)圖，不必考慮過(guò)多的單位轉(zhuǎn)換計(jì)算、適配等問(wèn)題
設(shè)置viewport
設(shè)置布局窗口和視覺(jué)窗口一致，縮放比例都設(shè)為1，并且不允許縮放
width=device-width: 表示讓 布局視口 的寬度等于設(shè)備寬度initial-scale=1.0: 表示頁(yè)面的初始縮放比例為1，讓 視覺(jué)視口 等于 理想視口maximum-scale=1.0,minimum-scale=1.0：表示頁(yè)面的最大/最小縮放比為1user-scalable=no表示不允許用戶對(duì)頁(yè)面進(jìn)行縮放操作
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
移動(dòng)端布局
這里采用的方案是將px轉(zhuǎn)換成rem，在實(shí)戰(zhàn)中，我們要學(xué)會(huì)使用工具來(lái)幫助快速開(kāi)發(fā)，這里主要用兩個(gè)插件amfe-flexible和postcss-pxtorem
- amfe-flexible：配置可伸縮布局方案，主要是將
1rem設(shè)為viewWidth/10 - postcss-pxtorem：
postcss-pxtorem是postcss的插件，用于將像素單元生成rem單位。
- 在設(shè)置布局前，需要引入 reset.css 文件，用來(lái)消除不同設(shè)備的瀏覽器之間的差異
// main.js
import './assets/resset.css'
安裝
postcss-pxtorem和amfe-flexible
npm install postcss-pxtorem amfe-flexible -D在
main.js中引入amfe-flexible
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入 amfe-flexible
import 'amfe-flexible/index'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
- 在
vue.config.js文件（如果沒(méi)有，需要自己項(xiàng)目根目錄手動(dòng)創(chuàng)建）中對(duì)postcss-pxtorem配置
pxtorem的配置項(xiàng)主要是設(shè)置rootValue，也就是根元素字體大小，一般這個(gè)值是根據(jù)設(shè)計(jì)稿來(lái)設(shè)置的，rootValue = 設(shè)計(jì)稿寬度/10，設(shè)計(jì)稿一般是375px或750px寬度來(lái)設(shè)計(jì)的
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 這是用來(lái)自動(dòng)添加兼容各瀏覽器的css前綴的，比如--webkit-xxx等
autoprefixer(),
// 這是px轉(zhuǎn)換成rem的插件，參數(shù)是一些配置，主要是設(shè)置rootValue
pxtorem({
rootValue: 37.5, // 根元素的font-size，這里是針對(duì)375的設(shè)計(jì)稿
unitPrecision: 5, // 轉(zhuǎn)換成rem后保留的小精準(zhǔn)度
propList: ['*'], // 作用于哪些屬性
selectorBlackList: ['vant-'], // 將哪些html元素排除在外，這里添加的是vant
replace: true,
mediaQuery: true,
minPixelValue: 0,
exclude: /node_modules/
})
]
}
}
}
}
- 寫個(gè)測(cè)試demo
<template>
<div class="content">test h5 layout</div>
</template>
<style>
.content {
width: 375px;
background: #eee;
font-size: 16px;
}
</style>
- 在瀏覽器打開(kāi)
發(fā)現(xiàn)已經(jīng)隨著不同的設(shè)備，html和body以及設(shè)置的容器大小、字體已經(jīng)隨之變化，都已經(jīng)轉(zhuǎn)換成對(duì)應(yīng)的rem單位，說(shuō)明設(shè)置沒(méi)問(wèn)題
image.png
image.png
可能存在的坑：
PostCSS plugin postcss-pxtorem requires PostCSS 8
原因：安裝的postcss-pxtorem版本太高了，腳手架的postcss版本過(guò)低，不匹配
"postcss-pxtorem": "^6.0.0",
解決：將postcss-pxtorem降級(jí)，npm i postcss-pxtorem@5.1.1
后面有時(shí)間的話，會(huì)回來(lái)補(bǔ)充說(shuō)明這兩插件的實(shí)現(xiàn)原理，這里先留個(gè)坑...
參考：
https://blog.csdn.net/m0_47965154/article/details/115380574
