rem布局:
通常我们做移动端项目会使用rem布局,pc后台项目很少用到。会跟随当前屏幕大小自适应布局,不论在什么样的屏幕下,样式布局都保持一定的比例不变。
移动端通常使用淘宝的flexable.js
。pc端也可以使用
方法一:(亲测可实现)
npm install lib-flexible --save
(也可以直接下载里面的flexable.js文件将其引入项目中。例如util文件夹下)- 在main.js文件中 import进来flexible.js文件
- 更改flexible.js文件中的,找到 这里,将540换成width(否则只适用移动端布局)
- 再看一下当前页面的设计稿尺寸,在vscode安装px2rem插件,然后在设置中将
rootFontSize
设置成合理的大小 - 然后在需要使用rem布局的.vue文件中将px换成rem单位
- 最后设置当前页面的
min-width
、min-height
,保持最小尺寸下,再大的屏幕尺寸也不会乱了。文字宽高都永远保持一定比例、
方法二:(移动端rem布局)
- 安装amfe-flexible、postcss-px2rem-exclude
cnpm i amfe-flexible postcss-px2rem-exclude --save
- main.js文件中:
import 'amfe-flexible'
- 配置postcss.config.js。如果你的设计图是750px,可以在新建 postcss.config.js 文件中做如下配置:
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
"remUnit": 75,
"exclude": /node_modules/i
}
}
}
- 安装px2rem-exclude插件会自动将项目中的px转换成rem单位,这个带有exclude的不会将node_modules中的文件更改了。