December07,2021：注意这是一篇2018年发表的旧文章，因为网友提到上一篇文章链接失效，所以迁移了当时写的文章（文章之前存在之前公司的FE，内部提交，离开公司好久了，正好趁机迁移，免得损失，也算是本次PostCSS学习笔记的结束）。当然，PostCSS这些年发展很快，变化也很大，所以这套教程仅供参考），以下为原文内容：几个月前写了几篇关于PostCSS的文章，涉及基础配置研究和插件-探索中。后来还有一些未写的稿子，由于技术研究不够深入，没有完成，也不打算更新了（放在文末，有兴趣的可以拿看看你自己:)。后来正好有人在GitHub上提了postcss-px-to-viewport插件的使用问题，并尝试使用新的单位vw作为移动适配策略。以下是PostCSS的最终内容。PostCSS移动端适配值VW单元应用之前的extrachapter1已经写了很成熟的px转rem的方法。这次我将介绍另一种使用VW单元进行适配的PostCSS解决方案。在之前的PostCSS配置的基础上，安装postcss-px-to-viewport插件，这个插件好像是唯一可以转换成视口单位的PostCSS插件。这个插件类似于之前的postcss-pxtorem插件。配置方法看官方说明，这里就不多说了。当然，你还是需要使用amfe-flexible。事实上，新的单元肯定不适合旧的手机系统和浏览器。合适，目前没有准确的数据证明不会出现兼容性问题。当然，从未来的趋势来看，利用这个来适配不同分辨率的设备优势还是比较大的。可以参考我的GitHub上的一个移动端DEMO。PS：其实之前750px的设计稿我一直看不惯。测量完设计稿的尺寸后，需要手动除以2，这样可以通过配置直接写入原始尺寸吗？不过就我个人而言，我还是倾向于使用rem这个单位，可能更稳定一些！如果您有任何问题，请留言。关于PostCSS的内容就算全部讲完了，希望其他小伙伴在使用中一起学习讨论：D【初稿】PostCSS学习指南-插件（三）postcss-sorting这是一个可以按A排序的程序自动帮助您标准化和排序css属性的小插件。对于有干净代码强迫症的朋友来说，这款插件的存在更有意义。https://github.com/hudocenko...另一个类似的插件：css-declaration-sorter其他：postcss-pxtorem在忽略px的方式上似乎更好一些。postcss-px2rem不在PostCSS的列表中https://github.com/anandthakk...本地使用的caniuse项目[初稿]PostCSS学习指南(3)[GridLayout]参考资料你的layout设置方法靠谱吗？Gridbootstrap4网格系统和bootstrap3文档网格系统完整指南CSS网格挑战：构建模板，赢取丰厚奖品！（文末有很多干货）阅读bootstrap4光栅化官方说明。我没有在项目中使用过bootstrap，只是知道这个东西的一些规范和它的UI。这次有幸了解了bootstrap光栅化方案，特别惊讶居然有这么好的适配方法！不愧是一个强大的响应式布局CSS框架！！！如果您熟悉引导光栅化方法，则可以跳过此内容。后记随想（2021年12月07日）当年写这些文章的时候，热血沸腾。连SCSS和LESS都不懂，就专心研究PostCSS。Ben，我不记得了），当时我想出一本书，但最终因为精力有限没有深入下去。说到底，Javascript基础还不扎实，做事经常有30%的热情。不过话说回来，根据个人经验，可能跟工作环境有关。在后续的很多开发中，除了移动端可能会用到PostCSS，几乎没有用到。但是现在我很喜欢的TailwindCSS和PurgeCSS，跟PostCSS有一定的关系。对于前端未来的发展，我还是觉得PostCSS是一个非常好的东西。除了我的这套文章有点过时，还是支持大家学习和研究PostCSS~如果想从头看的话，请阅读2017年发布的PostCSS自学笔记（一）【安装与使用】
