移动端布局
通常叫做流式布局，百分比布局
常用长度单位:
% px rem vw vh
使用步骤
移动端适配和加后缀
- 安装amfe-flexible
- 首先把安装amfe-flexible包
npm i amfe-flexible -S
- 配置 postcss-pxtorem
postcss-pxtorem会将px转换为rem rem单位用于适配不同宽度的屏幕 根据标签的font-size值来计算出结果
npm install --save postcss-pxtorem@5.1.1
在项目入口文件main.js 中引入amfe-flexible import 'amfe-flexible'
在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- 新建postcss.config.js文件
Vue CLI 内部使用了 PostCSS
默认开启了autoprefixer 配置autoprefixer (浏览器前缀规则)
自动生成前缀 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: ['*']
}
}
}
项目结构
image.png
