关于移动端的适配,我喜欢用px2rem配合lib-flexible,非常方便,vue-cli3.0后,项目配置被大大精简了,这使得原来配置px2rem的文件不复存在,但其实只要掌握了正确的姿势,配置方法比原来更简单~
lib-flexible
作用:让网页根据设备dpr和宽度,利用viewport
和html
根元素的font-size
配合rem
来适配不同尺寸的移动端设备
安装:yarn add lib-flexible
引入:入口文件main.js
中:import 'lib-flexible/flexible.js'
pxtorem
作用:将项目中css的px转成rem单位,免去计算烦恼
安装:yarn add postcss-pxtorem
配置:package.json
内,在postcss
内添加:
"postcss": {
"plugins": {
"autoprefixer"