最近公司做一个移动端的项目,需要做适配,框架本身是提供了vue-cli3.0结合lib-flexible和px2rem实现移动端适配的方案,这里记录下自己做适配的方法。 

介绍
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
amfe-flexible 用于设置 rem 基准值

  1. 安装amfe-flexible
    npm i -S amfe-flexible
  1. 在main.js文件中引入lib-flexible
	import 'amfe-flexible/index.js'
  1. 安装postcss-pxtorem
	npm install postcss-pxtorem --save-dev
  1. 在public/index.html加入meta标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. 项目配置postcss
    在package.json里面加入这么一段代码
        "postcss": {
		    "plugins": {
		      "autoprefixer": {
		        "overrideBrowserslist": [
		          "Android 4.1",
		          "iOS 7.1",
		          "Chrome > 31",
		          "ff > 31",
		          "ie >= 8"
		        ]
		      },
		      "postcss-pxtorem": {
		        "rootValue": 37.5,
		        "propList": [
		          "*"
		        ]
		      }
		    }
		  }

这样就完成了适配,需要注意的是,css里面我们就只需要写px,然后会自动转换成rem在浏览器显示,rootValue设置为37.5,之所以设为37.5,是为了引用像vant这样的第三方UI框架,因为第三方框架没有兼容rem,用的是px单位,将rootValue的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原vant、mint-ui的组件,否则会样式会有变化,例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。

Logo

前往低代码交流专区

更多推荐