关于vue利用postcss-pxtorem进行移动端适配的问题及关于PostCss的理解

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结：

1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。

2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装即可，不需要另外进行配置，此插件是对px进行转换。

3.新建一个rem.js的文件，输入以下代码即可，然后在main.js中引用。

4.在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码，一般750px的设计稿的根元素大小设置32.

5.重启项目就ok了

关于PostCss的理解

借鉴了大牛的博客 去看看

BEM中涉及css命名规范的内容
PostCss是一个样式处理工具，它通过自定义的插件和工具生态体系来重新定义css。
    npm install --save-dev style-loader css-loader postcss-loader stylus-loader
    在项目中的根目录下，建个postcss.config.js文件，里面导出一个空模块
        autoprefixer 自动添加前缀
        cssnano 压缩css代码
        postcss-cssnext css的下一代，使用css4的新语法包含了autoprefixer插件
        postcss-pxtorem插件将px转换成rem
        
    问题一：比如像border这种我不愿意替换成rem的我该怎么解决？
        我还是想使用px来表达的话，那么我们可以把1px写成 1Px 或 1PX来解决
    问题二：postcss-pxtorem中有哪些属性？
        require('postcss-pxtorem')({
        //假设设计稿750宽;rootValue为75，说是对根元素大小进行设置.
            rootValue: 75,
        //unitPrecision为5,是转换成rem后保留的小数点位数.
            unitPrecision: 5,
        //propList是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']意思是排除带有border的属性.
            propList: ['*'],
        //selectorBlackList则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换这里也支持正则写法。
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
        //minPixelValue的选项，我设置了12，意思是所有小于12px的样式都不被转换
            minPixelValue: 12
        })
    问题三：怎么通过wenpack配置二倍图三倍图？

 转载于：https://www.jb51.net/article/174637.htm

                https://juejin.cn/post/6844903700197179406