手淘适配解决方案
阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中,通过不同屏幕的像素比来设置scale值,保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。
当然,要达到完全适配,我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的rem单位。
下面我们进行依赖的安装
npm i amfe-flexible postcss-pxtorem --save-dev
安装完成后我们需要进行postcss插件相关的配置在根目录新建一个名为postcss-config.js的文件,如果项目中已包含改文件则无需新建。在文件中写入如下代码:
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*','!border']
}
}
}
上面代码是在postcss中配置一个有关postcss-pxtorem的插件,其中rootValue的值表示要转换的倍数。当H5设计稿的width为375时,对应的rem就等于375/37.5 = 10rem当项目加载时。postcss会将插件postcss-pxtorem进行加载。postcss-px则负责将style中所有用px标记的样式转换成rem类型。propList这个配置则表示要将那些css样式进行匹配转换。其中*表示匹配所有的css !表示不需要匹配的
下面是postcss-pxtorem 其他的一些配置项
{
//rootValue(Number | Function) 表示根元素字体大小或根据参数返回根元素字体大小
rootValue : 16,
//类型为数字 允许 REM 单位增长到的十进制数字。
unitPrecision : 5,
//类型为数组 可以从 px 更改为 rem 的属性。
propList : [ 'font' , 'font-size' , 'line-height' ,
'letter-spacing' ],
//类型为数组 要忽略并保留为 px 的选择器 可以为正则表达式
selectorBlackList : [ ],
//类型为布尔值 替换包含 rems 的规则,而不是添加回退。
replace : true,
//类型为布尔值 允许在媒体查询中转换 px。
mediaQuery : false,
//类型为数字 设置要替换的最小像素值。
minPixelValue : 0,
//类型为字符串或正则表达式或函数 要忽略并保留为 px 的文件路径。
exclude:/ node_modules / i
}
值得注意的是: postcss-pxtorem 可能会将UI组件库也进行转换,若出现该问题,我们应该忽略掉vant相关的css
在main.js引入相关的包
之前我们安装了vant组件库和一些辅助的工具包 我们应该在main.js中引入
import 'amfe-flexible'
import Vue from 'vue'
//按需引入vant的一些组建
import {Toast,Dialog,Overlay} from 'vant'
import FastClick from 'fastClick'
FastClick.attach(document.body)
import Vconsole form 'vconsole'
if(process.env.NODE_ENV === 'development'){
const vConsole = new Vconsole({
defaultPlugin: ['system','network','element'],
maxLogNumber:'1024',
onReady:()=> console.log('i am fine')
})
}
Vue.use(Toast).use(Dialog).use(Overlay).use(Vconsole)
至此,我能的移动端适配就做好了,只需安装设计稿的比例进行开发就可以了