共计 1853 个字符,预计需要花费 5 分钟才能阅读完成。
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 自学笔记(一)【装置应用篇】