vue实现移动端适配解决方案

1.项目使用vue-cli + vant+ less +axios 开发

2.安装 amfe-flexible ,并在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

<header>
    <!-- 在页面 header标签中设置移动端视口-->
	<meta name='viewport' content='width=device-width,initial-scale=1.0, maximum-		scale=1.0,user-scalable=no'>
</header>

npm install amfe-flexible --save

//在main.js 引入amfe-flexible
import 'amfe-flexible';

3.安装 第三方插件 postcss-pxtorem 会自动将css代码中的px单位根据规则转换成rem 单位
注意: 如果css样式中 有不需要转成rem 的单位，只需将单位写成大写PX 即可。

//注意需要安装5.11 版本，否则报错
npm i postcss-pxtorem@5.1.1

4.在项目根目录创建vue.config.js文件，设置如下配置
注意：修改完项目根目录下的配置文件后，一定要重启项目，这样配置文件才生效

module.exports = {
  lintOnSave:false,// eslint-loader 是否在保存的时候检查
  css: {
       loaderOptions: {
            postcss: {
              plugins: [
                   // 把px单位换算成rem单位
                require("postcss-pxtorem")({
                     // 换算的基数 375的设计稿，换算基数就是37.5
                      rootValue: 37.5, 
                      selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
                      propList: ["*"], //可以从px更改为rem的属性。
                      minPixelValue: 1 // 设置要替换的最小像素值。
                  })
              ]
            }
       }
	}
}

5.在main.js 文件中, 引入重置样式表,去掉标签的默认样式

在这里插入代码片

// 引入重置样式表
import ‘@/assets/css/reset.css’
重叠样式表代码如下

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}