基于vue cli3的移动端适配解决方法

基于vue cli3的移动端适配解决方法

基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem
注意因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html的font-size固定为54px,并不能根据屏幕尺寸调整html的font-size的大小,所以如果还想适配电脑端可以修改源码
最新文章

1,第一步先安装 flexible和 postcss-px2rem(命令行安装)

npm install lib-flexible --save

npm install postcss-px2rem --save

简要介绍这两个包的用途:

flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值。

2, 引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!

3, 配置postcss-px2rem

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 那么我们必须在写样式时,也将值改为设计图的一半。

注意:对于行内样式,阿里手淘并不能将px转rem,所以对于需要自适应的样式,如font-size、width、height等请不要写在行内。同理,对于不需要转化的样式可以写在行内,或者使用PX(大写)作为单位。

4、全局的base.css引用

bsse.css

/* 网页样式reset */
body{font:12px/1.5 arial,"微软雅黑",georgia,verdana,helvetica,sans-serif}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
img{
	vertical-align: bottom;
}
li{
	list-style: none;	/*清楚li的列表符号*/
}
a{
	text-decoration: none;		/*清除a链接自带的下划线*/
	color: #000;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
input,select,button{
	outline: none;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	visibility:hidden;
	clear: both;
}

base.css以及index.scss一般也在main.js里面引入:

import './css/base.css'
import './scss/index.scss'

本人相关的最新文章

你可能感兴趣的:(vue)