我在我的反應應用程序上將一些媒體查詢選擇器應用於我的 css 文件但沒有工作

Question

我正在關注反應課程，我嘗試在我的應用程序中使用 css 模塊時將媒體查詢應用於我的 css。 但不幸的是，媒體查詢不起作用。

這是我的 css 文件：

.Burger {
    width: 100%;
    height: 250%;
    margin: auto;
    overflow: scroll;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}

@media (min-width: 500px) and (min-height: 400px) {
    .Burger {
        width: 350px;
        height: 300px;
    }
}

@media (min-width: 500px) and (min-height: 401px) {
    .Burger {
        width: 450px;
        height: 400px;
    }
}

@media (min-width: 1000px) and (min-height: 700px) {
    .Burger {
        width: 700px;
        height: 600px;
    }
}

and here is my component code:
import React from "react";
import classes from "./Burger.module.css";
import BurgerIngredient from "./BurgerIngredient/BurgerIngredient";

const burger = (props) => {
    return(
        <div className={classes.Burger}>
            <BurgerIngredient type= "bread-top" />
            <BurgerIngredient type= "cheese" />
            <BurgerIngredient type= "meat" />
            <BurgerIngredient type= "bread-bottom" />
        </div>
    );
};

export default burger;

請任何人都可以幫助解決這個問題，因為媒體查詢不起作用

Answer 1

在媒體查詢中將 min-width 更改為 max-width