1

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自学笔记(一)【安装使用篇】

FinallyPost


whidy
984 声望77 粉丝

喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ