html 最大宽度的CSS媒体查询：1024px未按预期工作

我有麻烦得到一个CSS媒体查询，以正常工作的最大宽度：我的目标是为屏幕更大的设备提供不同的布局，因此我使用以下媒体查询：
首页

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Menu</title>
<link rel="stylesheet" href="master.css"> </head> <body>

<div class="headertext">
    Mexican Food
</div>

<div class="recipelist">
    <p>Recipes</p>
    <a class="recipes" href="./recipe1/index.html">Enchiladas</a>
    <a class="recipes" href="./recipe2/index.html">Sopes</a>
    <a class="recipes" href="./recipe3/index.html">Flan</a>
    <a class="recipes" href="./recipe4/index.html">Tres Leches</a>
    <a class="recipes" href="./recipe5/index.html">Tostadas</a>
    <a class="recipes" href="./recipe6/index.html">Pozole</a>
</div> </body> </html>

第二页

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enchilada's Recipe</title>
<link rel="stylesheet" href="../master.css"> </head> <body>
<div id = "all">
    <div id = "header">
    <h1>Enchiladas</h1>
    </div>
    <div id = "left">
    <h2>Video</h2>
    <div>
        <iframe 
  src="https://www.youtube.com/embed/CjoVxMSdfKg"></iframe>
    </div>
    </div>
    <div id = "right">
    <h2 >Recipe</h2>
    <ul>
        <li>
            INGREDIENTS
            1 lb ground beef (I used 97/3 lean to fat ratio)
            1/4 cup diced onions 
            2 garlic cloves minced
            1/2 tsp ground cumin
            1/2 tsp salt</li>
        <li>pepper to taste
            14  corn tortillas
            1/3 cup oil (for softening corn tortillas)
            12 oz cheddar cheese (or Colby jack cheese)</li>
    </ul>
    </div>
    <div id = "footer">
    <h3><a href="https://www.youtube.com/watch?v=CjoVxMSdfKg">Enchilada

视频
一个二个一个一个
这是我另一个媒体问题

@media (max-width: 320px){
    body{
        background-image: url(./images/img1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        }

        button{
            transform: translateY(-1vh);
            background-color: orange;
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
            }
        
            .button1 {
                background-color: white; 
                color: black; 
                border: 2px solid #4CAF50;
              }
              
              .button1:hover {
                background-color: #4CAF50;
                color: white;
              }

        .headertext{
            max-width: 75%;
            height: 130px;
            backdrop-filter: blur(5px);
            color: white;
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30px;
            box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            margin: 0 auto;
        }

        .recipelist{
            max-width: 50%;
            height: 280px;
            backdrop-filter: blur(5px);
            color: white;
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30px;
            box-shadow: 0px 0px 16px rgb(0,0,0,0.5);
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            margin: 0 auto;
            transform: translateY(3vh);
        }

        /*jello layout start*/
        #all {
            backdrop-filter: blur(5px);
            width: 315px;
            height: 270px;
            margin: auto;
            position: absolute;
            top: 36%;
            left: 52%;
            margin-right: -50%;
            transform: translate(-50%, -50%) translateX(-1vh);
          }
          

#header {
    text-align: center;
    width: 314px;
    height: 80px;
}

#left {
    display: inline-block;
    width:90px;
    clear: left;
    height: 105px;
    border: 1px solid black;
}

iframe{
    width: 92px;
    height: 68px;
   }

   li{
    font-size: 9px;
    transform: translateY(-2vh);
   }

#right {
    float: left;
    width: 207px;
    height: 130px;
}

#footer {
    width: 314px;
    height: 144px;
    text-align: center;
}

h2{
    font-size: 10px;
}

h3{
    font-size: 12px;
}
/*jello layout end*/

然而，这个查询似乎被完全忽略了，即使我把浏览器窗口的宽度调整得更大，但是小屏幕的样式仍然适用。
对于可能导致此问题的原因或如何解决此问题，是否有人有任何建议？提前感谢您的帮助！
我已经检查了没有冲突的样式或其他媒体查询可能会覆盖这个。我需要使用1024 px

最有可能的问题是，规则会相互覆盖，代码后面的规则会胜出。
问题是，您为max-width: 320px定义了一个查询，该查询从1px应用到320px，还定义了一个从1px应用到1024px的查询，因此您定义了两次从1px到320px的区域。
用min-width代替max-width来代替1024px。这将只适用于大于1024px的屏幕。从你的描述来看，这是我认为你想要实现的。

body {
  background-color: orange;
}

@media only screen and (max-width: 320px) {
  body {
    background: green;
  }
}

@media only screen and (min-width: 1024px) {
  body {
    background: red;
  }
}

<body>Test</body>

以相同的方式，例如320px和500px之间的区域可以用以下方式寻址：
一个二个一个一个

html 最大宽度的CSS媒体查询：1024px未按预期工作

1条答案

相关问题

热门标签

最新问答