关于postcss:PostCSS学习指南终结篇

4次阅读

共计 1853 个字符，预计需要花费 5 分钟才能阅读完成。

2021 年 12 月 07 日：留神这是一篇公布于 2018 年的老文章，因网友提到上篇文章有个链接生效的问题，故将过后写的文章迁徙过去（文章之前存于上家公司的 FE 外部提交，到职已久，正好借机迁徙，防止失落，也算是终结这几篇 PostCSS 的学习笔记）。当然这么多年 PostCSS 倒退迅猛，变动也很大，故这套教程也仅供参考），以下是原文内容：

几个月前写了几篇对于 PostCSS 的文章，波及到根本配置钻研和插件的摸索，起初还有几份不成文的草稿，因为本身技术钻研不够深刻也就始终没有写完，也不打算更新了（放在文章底部，有趣味本人看看：）。起初正巧有集体在 GitHub 下面提了个 issue 对于 postcss-px-to-viewport 插件的应用 postcss-px-to-viewport 插件的应用，也就尝试用了新单位 vw 来做挪动端的适配策略。以下便是 PostCSS 最初的内容了。

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

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

这个插件跟之前的 postcss-pxtorem 插件比拟相似，配置办法见官网阐明这里就不多说了，当然还是要用到 amfe-flexible，其实新单位的对旧的手机零碎和浏览器来说必定还是不适合的，目前也没有一个精确的数据来证实这个不会呈现兼容性问题。

当然，将来趋势来看，用这个在不同分辨率的设施适配上的劣势还是比拟大的，能够参考我的 GitHub 的一个挪动端 DEMO。

PS：其实我始终都很不适应之前设计稿 750px，测量了设计稿的尺寸后，还须要手动除以 2，这个齐全能够通过配置来间接写原始尺寸的？不过就我集体来看，我还是偏向采纳 rem 单位，或者更加稳固吧！

如果还有疑难，欢送留言，对于 PostCSS 的所有内容就算完结了，也心愿其余敌人们在应用中一起学习探讨:D

这是一款可能按主动帮忙你的 css 属性进行规范化排序的一个小插件，对于有整洁代码强迫症的敌人来说，这个插件存在的意义就比拟大了。

https://github.com/hudochenko…

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

其余：

postcss-pxtorem对 px 进行疏忽解决的形式仿佛更好

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

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

参考文献

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

A Complete Guide to Grid

bootstrap4 Grid system & bootstrap3 文档栅格零碎

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

不瞒大家，我之前并未在我的项目中应用过 bootstrap，也只是晓得这个货色和他的 UI 的一些标准而已。这次有幸理解到 bootstrap 栅格化的计划，尤为惊喜，竟然有这么好的适配办法！不愧是弱小的响应式布局 CSS 框架啊！！！

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

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

不过话说回来，依据集体教训，兴许和工作环境无关，起初的很多开发中，除了挪动端或者会用到 PostCSS，简直没有再用了。然而现在我十分喜爱的 TailwindCSS、PurgeCSS 这些都和 PostCSS 有肯定关系，对于前端将来的倒退，我仍然感觉 PostCSS 是十分不错的玩意。除了我的这套文章有些掉队，也还是十分反对大家去学习去钻研 PostCSS 的~

如果想要从头看，请浏览 2017 年公布的 PostCSS 自学笔记（一）【装置应用篇】

正文完