移动端vue 的项目适配一直是个问题,这里记录下实现
推荐用 postcss-px-to-viewport 插件去处理,转换成vw 单位
postcss-px-to-viewport是一款非常好用的插件,
它将px转换成视口单位vw,大家都知道,vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth 获取
用默认即可,可以不用设置修改
本案例是在cli3中实施的,其他的照旧应该也一样
在vue项目中引入
1.我们先把它安装到项目的开发环境:
npm i postcss-px-to-viewport -D
1.
2.在项目根目录下新建.postcssrc.js文件
3.添加下面配置:
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
“postcss-px-to-viewport”: {
unitToConvert: “px”, // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: [“*”], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: “vw”, // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: “vw”, // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: [“wrap”], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
};
4.重新运行项目,配置文件生效
5.写一段测试代码来验证一下:
6.打开控制台,可以看到已经进行了转换
要注意的配置
propList: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,
如propList: [“*”,“!letter-spacing”],这表示:所有css属性的属性的单位都进行转化,
除了letter-spacing的
selectorBlackList:转换的黑名单,
在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,
就不会被匹配。
比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位,
都不会被转换
兼容第三方UI库
当我们引入一些第三方库的时候,比如vant,上面配置的exclude去掉,表示全部内容进行vw转换,会遇到这样的问题:
像这个TabBar,变得非常的小,被压扁了。
其实vant官网也是给出了关于viewport的适配方案,在github找一个名为vant-demo的项目,可以看到其配置如下:
总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。