如何同时使用@media屏幕和@ -moz文件？

在CSS中，@media 和 @-moz-document 是两种不同的规则，分别用于处理屏幕尺寸和浏览器特定的样式。要同时使用这两个规则，可以将它们放在一个样式表中，并确保它们的语法正确。

以下是一个示例，展示了如何在同一个样式表中使用 @media 和 @-moz-document 规则：

/* 通用样式 */
body {
  background-color: lightblue;
}

/* 针对不同屏幕尺寸的样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

/* 针对特定浏览器（如Firefox）的样式 */
@-moz-document url-prefix() {
  body {
    background-color: lightcoral;
  }
}

在这个示例中，我们首先定义了一个通用的背景颜色（浅蓝色）。然后，我们使用 @media 规则为屏幕宽度小于600像素的设备定义了一个不同的背景颜色（浅绿色）。最后，我们使用 @-moz-document 规则为Firefox浏览器定义了一个特定的背景颜色（浅红色）。

这样，当用户在不同设备和浏览器上访问网站时，将根据设备尺寸和浏览器类型应用不同的样式。

请注意，这个示例中的 @-moz-document 规则适用于所有Firefox浏览器，包括较旧的版本。如果您只想针对最新版本的Firefox浏览器，可以使用更具体的选择器，例如：

@-moz-document url-prefix("about:config") {
  body {
    background-color: lightcoral;
  }
}

这将仅在Firefox的“about:config”页面上应用特定的背景颜色。