在前端开发中，我们经常需要针对不同的屏幕尺寸和设备类型编写不同的样式。而 CSS 的 @media 规则可以帮助我们实现这一目标。但是，当我们需要针对某个屏幕尺寸修改某个选择器的位置时，就需要涉及到 CSS 的移动规则。这时，就可以使用 rework-move-media 这个 npm 包来实现。
rework-move-media 简介
rework-move-media 是一款基于 Rework 的 CSS 处理工具，可以方便地移动 @media 规则中的样式。它支持将 @media 规则中的样式，移动到选择器的前面或后面，或者移动到其他规则中。
安装
使用 npm 命令来安装 rework-move-media。
npm install rework-move-media
使用
将 @media 中的样式移动到选择器前面
-- -------------------- ---- -------
--- ------ - ------------------
--- --------- - -----------------------------
--- --- - -------------- ------ --- ----------- ------ - ---- - ------ ---- - ---
----------------
----------- ------
---
------------
-----------------在上面的例子中，我们将 @media 中的样式移动到了选择器 .foo 的前面。这样，在屏幕宽度大于等于 500px 时，.foo 的文本颜色就会变为红色。该例子运行后的输出结果如下：
.foo {
color: red;
}
@media screen and (min-width: 500px) {}将 @media 中的样式移动到选择器后面
-- -------------------- ---- -------
--- ------ - ------------------
--- --------- - -----------------------------
--- --- - -------------- ------ --- ----------- ------ - ---- - ------ ---- - ---
----------------
---------- ------
---
------------
-----------------在上面的例子中，我们将 @media 中的样式移动到了选择器 .foo 的后面。这样，在屏幕宽度大于等于 500px 时，.foo 的文本颜色就会变为红色。该例子运行后的输出结果如下：
@media screen and (min-width: 500px) {}
.foo {
color: red;
}将 @media 中的样式移动到另一个选择器中
-- -------------------- ---- -------
--- ------ - ------------------
--- --------- - -----------------------------
--- --- - -------------- ------ --- ----------- ------ - ---- - ------ ---- - ---
----------------
------- ------
---
------------
-----------------在上面的例子中，我们将 @media 中的样式移动到了选择器 .bar 中。这样，在屏幕宽度大于等于 500px 时，.foo 的文本颜色就会变为红色。该例子运行后的输出结果如下：
.bar {
color: red;
}
@media screen and (min-width: 500px) {}结论
使用 rework-move-media 包可以方便地移动 @media 规则中的样式，从而实现更加灵活的 CSS 编写方式。同时，由于该包基于 Rework，因此可以方便地与其他 Rework 插件搭配使用，实现更加复杂的 CSS 处理需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77747