基于vue cli3的移动端适配解决方法
使用 rem 单位进行适配,推荐使用以下两个工具:
lib-flexible
postcss-px2rem
注意:因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html标签的font-size固定为54px,并不能根据屏幕尺寸调整html标签的font-size的大小,所以如果还想适配电脑端可以修改源码
vue项目移动端、pc端适配方案(px转rem)
1,安装 lib-flexible和 postcss-px2rem
npm install lib-flexible --save
npm install postcss-px2rem --save
简要介绍这两个包的用途:
lib-flexible会为页面根据屏幕自动添加<meta name='viewport' >
标签,动态控制initial-scale
,maximum-scale
,minimum-scale
等属性的值。
postcss-px2rem会将px转换为rem用于适配不同宽度的屏幕,根据<html>
标签的font-size值来计算出结果,即1rem=html标签的font-size值。(具体可自行百度单位rem的定义)。
2,引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项 由于lib-flexible会动态给页面header中添加<meta name='viewport' >
标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
3,配置postcss-px2rem
postcss-px2rem
的配置放在vue-cli3 项目中vue.config.js
文件中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js
)
具体配置内容如下:
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
温馨提示: remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢???
之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
注意事项
1、不使用行内样式
对于行内样式,阿里手淘并不能将px转rem,所以对于需要自适应的样式,如font-size、width、height等请不要写在行内。同理,对于不需要转化的样式可以写在行内,或者使用PX(大写)作为单位。
2、字号不使用rem
我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用PX
(大写)来表示,至于适应,我们可以写媒体查询。
.item {
border-bottom: 1PX #8d8d8d dashed;
font-size: 12PX;
line-height: 16PX;
@media screen and (min-width: 576PX) {
font-size: 14PX;
line-height: 18PX;
}
@media screen and (min-width: 768PX) {
font-size: 16PX;
line-height: 28PX;
}
@media screen and (min-width: 992PX) {
font-size: 16PX;
line-height: 32PX;
}
@media screen and (min-width: 1200PX) {
font-size: 18PX;
line-height: 64PX;
}
}