移動端布局
通常叫做流式布局，百分比布局
常用長度單位:
% px rem vw vh
使用步驟
移動端適配和加后綴
- 安裝amfe-flexible
- 首先把安裝amfe-flexible包
npm i amfe-flexible -S
- 配置 postcss-pxtorem
postcss-pxtorem會將px轉(zhuǎn)換為rem rem單位用于適配不同寬度的屏幕 根據(jù)標(biāo)簽的font-size值來計算出結(jié)果
npm install --save postcss-pxtorem@5.1.1
在項目入口文件main.js 中引入amfe-flexible import 'amfe-flexible'
在根目錄的index.html 的頭部加入手機(jī)端適配的meta代碼
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- 新建postcss.config.js文件
Vue CLI 內(nèi)部使用了 PostCSS
默認(rèn)開啟了autoprefixer 配置autoprefixer (瀏覽器前綴規(guī)則)
自動生成前綴 browserslist 字段
postcss.config.js配置
module.exports = {
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', ] }] },
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
] },
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
項目結(jié)構(gòu)
image.png
