10、利用PostCSS构建媒体查询及管理颜色、图像和字体

利用PostCSS构建媒体查询及管理颜色、图像和字体

1. 媒体查询与CSS4的结合探索

在实现媒体查询时，PostCSS插件确实让操作变得简单，但我们不能盲目地大量使用媒体查询，而应先考虑是否有其他替代方法能达到相同效果。接下来，让我们深入了解如何借助CSS4进一步拓展功能。

传统的媒体查询语义性不强，例如“max - width: 1024px”，我们实际想表达的是“小于”或“大于”的意思。好在即将到来的CSS4（人们普遍这样称呼）允许我们使用“>”、“<”或“=”符号来表达真实意图。PostCSS的强大之处在于，我们可以通过 postcss - media - minmax 插件（可从https://github.com/postcss/postcss - media - minmax获取）提前模拟这一功能，该插件会将这些符号转换为我们熟悉的“min - ”或“max - ”语句。

为了演示该插件的使用，我们将打破常规，使用CodePen。CodePen支持有限数量的插件，此插件便是其中之一，这是一个观察查询效果的绝佳机会。在演示中，我们会使用Font Awesome库创建社交媒体图标，演示示例可在http://codepen.io/alibby251/pen/wKNMGL查看，其中第71行使用了“<=”和“>=”符号。编译后，会显示有效的CSS代码。

媒体查询中使用“<”或“>”等运算符只是CSS4的一小部分内容，更多细节可查看W3C编辑草案http://dev.w3.org/csswg/mediaqueries/ 。

2. 利用PostCSS创建响应式网站