PostCSS学习指南终结篇

2021年12月07日：注意这是一篇发布于2018年的老文章，因网友提到上篇文章有个链接失效的问题，故将当时写的文章迁移过来（文章之前存于上家公司的FE内部提交，离职已久，正好借机迁移，避免丢失，也算是终结这几篇PostCSS的学习笔记）。当然这么多年PostCSS发展迅猛，变化也很大，故这套教程也仅供参考），以下是原文内容：

几个月前写了几篇关于PostCSS的文章，涉及到基本配置研究和插件的探索，后来还有几份不成文的草稿，由于自身技术研究不够深入也就一直没有写完，也不打算更新了（放在文章底部，有兴趣自己看看：）。后来正巧有个人在GitHub上面提了个issue关于postcss-px-to-viewport插件的使用 postcss-px-to-viewport插件的使用，也就尝试用了新单位vw来做移动端的适配策略。以下便是PostCSS最后的内容了。

PostCSS移动端适配值VW单位应用

之前的 番外篇一已经写了px转为rem的相当成熟的方式了。这次要介绍PostCSS另一个运用VW单位来进行适配的方案。

基于之前的PostCSS配置，安装postcss-px-to-viewport插件，貌似是目前唯一一个可以转换成viewport单位的PostCSS插件。

这个插件跟之前的postcss-pxtorem插件比较类似，配置方法见官方说明这里就不多说了，当然还是要用到amfe-flexible，其实新单位的对旧的手机系统和浏览器来说肯定还是不合适的，目前也没有一个准确的数据来证明这个不会出现兼容性问题。

当然，未来趋势来看，用这个在不同分辨率的设备适配上的优势还是比较大的，可以参考我的GitHub的一个移动端DEMO。

PS：其实我一直都很不适应之前设计稿750px，测量了设计稿的尺寸后，还需要手动除以2，这个完全可以通过配置来直接写原始尺寸的？不过就我个人来看，我还是倾向采用rem单位，或许更加稳定吧！

如果还有疑问，欢迎留言，关于PostCSS的所有内容就算结束了，也希望其他朋友们在使用中一起学习探讨:D

【草稿】PostCSS学习指南-插件（三）

postcss-sorting

这是一款能够按自动帮助你的css属性进行规范化排序的一个小插件，对于有整洁代码强迫症的朋友来说，这个插件存在的意义就比较大了。

https://github.com/hudochenko...

类似的另一个插件：css-declaration-sorter

其他：

postcss-pxtorem对px进行忽略处理的方式似乎更好

postcss-px2rem却没有被收录在PostCSS的列表中

https://github.com/anandthakk... 一个本地使用的caniuse项目

【草稿】PostCSS学习指南（三）【栅格化布局】

参考文献

你的布局设定方法靠谱吗？

A Complete Guide to Grid

bootstrap4 Grid system & bootstrap3文档栅格系统

The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!（末尾有大量干货）

阅读bootstrap4栅格化官方说明的一点心得

不瞒大家，我之前并未在项目中使用过bootstrap，也只是知道这个东西和他的UI的一些规范而已。这次有幸了解到bootstrap栅格化的方案，尤为惊喜，居然有这么好的适配方法！不愧是强大的响应式布局CSS框架啊！！！

如果大家熟悉bootstrap栅格化的方式，可略过此内容。

后记随想（2021年12月07日）

当年写这几篇文章的时候热血沸腾，连SCSS、LESS都没搞得很明白的情况下，一门心思想研究PostCSS，当时国内没有一本书籍介绍PostCSS（可能有一本，有点想不起来了），还想着我要出一本书，最终还是由于精力有限，没有去进一步深究，说到底也是Javascript基础尚不扎实，再加上自己经常三分热度做事。

不过话说回来，根据个人经验，也许和工作环境有关，后来的很多开发中，除了移动端或许会用到PostCSS，几乎没有再用了。但是如今我非常喜欢的TailwindCSS、PurgeCSS这些都和PostCSS有一定关系，对于前端未来的发展，我依然觉得PostCSS是非常不错的玩意。除了我的这套文章有些落伍，也还是非常支持大家去学习去研究PostCSS的~

如果想要从头看，请阅读2017年发布的PostCSS自学笔记（一）【安装使用篇】