前言
在前端开发中，响应式设计是必不可少的一个环节。而在编写 CSS 时，我们经常需要用到媒体查询来适配各种不同的屏幕尺寸。但是，当我们需要写多个媒体查询时，往往会出现代码量过多、维护难度大等问题。针对这个问题，善于发掘工具的前端工程师们，推出了一款能够解决这一问题的 npm 包，那就是 postcss-media-query-shorthand。
postcss-media-query-shorthand 是一款基于 PostCSS 的插件，它可以将多个媒体查询简写成一个更为简洁的表达形式。下面，让我们来了解一下这个实用的 npm 包吧。
安装
首先，我们需要在全局安装 PostCSS：
npm install -g postcss
然后，在项目中安装 postcss-media-query-shorthand：
npm install postcss postcss-media-query-shorthand --save-dev
安装完成后，我们就可以愉快地使用它了。
使用
使用 postcss-media-query-shorthand 最简单的方式，就是在 PostCSS 配置中加入一个 plugins 配置项，如下所示：
module.exports = {
plugins: [
require('postcss-media-query-shorthand')
]
}除此之外，它还支持更加复杂的配置，我们可以使用：
postcss([
require('postcss-media-query-shorthand')(options)
])options 是一个可选的对象（具体使用方式可以参考官方文档），这里我们就不讲解了。
实例演示
为了更好的理解 postcss-media-query-shorthand，我们可以看下面这个简单的例子：
-- -------------------- ---- ------- -- ---------- -- ------ ------ --- ----------- ------ --- ----------- ------ - -- --- -- - ------ ------ --- ----------- ------ --- ----------- ------ - -- --- -- - ------ ------ --- ----------- ------ --- ----------- ------- - -- --- -- - ------ ------ --- ----------- ------- - -- --- -- -
我们可以使用 postcss-media-query-shorthand 将其简写成：
-- -------------------- ---- ------- -- ------ -- ------ ------ -- ----- -- ------ - -- --- -- - ------ ------ -- ----- -- ------ - -- --- -- - ------ ------ -- ----- -- ------- - -- --- -- - ------ ------- -- ------ - -- --- -- -
这不仅使代码更加简洁明了，而且更具可读性和可维护性。
涵盖更多
postcss-media-query-shorthand 并不是唯一的插件。PostCSS 生态环境相当发达，有大量的插件可供我们使用。例如，我们可以使用 cssnext、postcss-opacity等插件为我们的项目注入更多的功能。
以上就是在 npm 包中使用 postcss-media-query-shorthand 的教程，希望可以对各位开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3181e8991b448daef1