在使用vue-cli 3.0的版本中会发现跟vue-cli2.0的差别很大,一开始打开项目会发现居然没有build文件夹啦;这样会导致没法使用build文件中的文件;故研究了一下:
首先初始化一个vue-cli3.0项目:
vue create mobile
安装使用的插件,这里的px转rem的插件我用的是postcss-px2rem-exclude,而非postcss-px2rem,主要是前者可以排除一些第三方ui文件,不进行rem转换,后者则不行。
npm install amfe-flexible postcss-px2rem-exclude --save-dev
之后在main.js中引入:
import 'amfe-flexible'
这里有一点比较模糊的,就是关于amfe-flexible的版本问题,有些地方叫lib-flexible,其实都是一个东西,之前一直傻傻分不清楚。这个js其实做的工作只有一个就是通过js动态修改meta,给html设置相应的font-size等,当然如果不用它的话我们也可以根据需要手动修改。
所以我们就直接使用postcss-px2rem-exclude 不使用postcss-px2rem来采坑了,
之后在项目的入口文件index.html中添加
<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=0" />
之后在项目中使用px就会自动转换为rem了;
注意:
a.对于大标题或者slogan类的,直接用rem;
b.对于段落类的,描述性的,用px;
c.px不转rem的话,可以这么写
font-size: 24px; /*no*/
有些页面需要计算容器的高度,从而实现滚动加载等效果,但是在rem这种方案下,行内样式px是不会转化的。这时候该怎么办呢?
项目里暂时性的解决方案是用css的calc()处理,但是兼容性不好处理,只能后续有好的方案再改进吧;
该文章是借鉴这篇文章的:https://blog.csdn.net/u012830884/article/details/90768162?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control