Question

React中的SCSS媒体查询有问题。

我正在使用scss loader

        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }

并且在_menu.scss中

.menu-button {
position: fixed;
right: 2em;
top: 2em;
z-index: 999;
width: 4em;
height: 3em;
background-color: inherit;
border: none;
cursor: pointer;

@media all and (min-width: 728px) {
  background-color: #000000;
}

之后，我在base.scss中调用

但是min-width一直在起作用，并且不能确定设备具有哪个宽度，而max-width根本不起作用。

有人可以帮我吗？我在做什么错了？

结果：应该为max-device-width或min-device-width：）

Answer 1

据我所知，根据您的代码，您的媒体查询无法正常工作，因为您没有在媒体查询中指定哪个元素应具有background-color: #000000

如果您希望在480px以下的屏幕尺寸下使用不同的背景色，则应该执行以下操作：

@media all and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

反应的SCSS媒体查询不翻译最大宽度

1 个答案: