如何在 @media 查询中禁用 <div>

Question

我创建了一个 Binary-Calculator 站点，我希望 calc 的背景是灰色的，但主体应该是黑色的。所以我做了一个黑色的 Body 和一个 Div 来处理我想要的所有元素都在这个灰色的背景中。在桌面上一切正常，但现在我开始为移动设备优化，我意识到我必须“禁用”导致灰色背景的 div，所以有一个干净的黑色 ui，没有那个灰色的大背景线。当我在 chromes 模拟手机上测试我的 @media 查询时，一切都定位正确，甚至 div 背景也消失了。虽然当我在手机上测试它时，它看起来像在图片中。提前谢谢你。

simulated phone

Phone

Desktop 1920x1080

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

/*Desktop*/
@media only screen and (max-width: 2560px) {
body{
    background-color:black;
}

h1{
    font-family:Sans-serif; 
    font-size:60px; 
    text-decoration: underline black;
}
.background-box{
    height:100vh; 
    width:60vw;
    background-color: rgb(42, 42, 42);
    margin:auto;
    text-align:center;
}

.Dezi{
    width:500px;
    height:40px;
    font-size:25px;
}

.rechnen{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    height:70px;
    width:400px;
    background-color:white;
    border-width:2px;
    border-color:black;
    border:solid;
    border-width:2px;
    box-shadow: inset 0 0 0 0 white;
    transition:ease-out 0.8s;
}

.rechnen:hover{
    cursor:pointer;
    box-shadow:inset 700px 0 0 0 #000000;
    color:white;
    border-color:white;
}

#operator{
    position:relative;
    top:30px;
    left:290px
}

.result{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:25px;
}

.homebutton{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    width:350px;
    height:70px;
    letter-spacing:2px;
    color:black;
    transition: ease-out 0.4s;
    background-color:white;
    float:right;
    position:relative;
    box-shadow:black;
    border-color:rgb(0, 0, 0);
    top:-935px;
    box-shadow:inset 0 0 0 0 white;
    border:solid;
    
}

.homebutton:hover {
    cursor:pointer;
    box-shadow:inset 350px 0 0 0 black;
    color:white;
    border-color:white;
    border-width:2px;
}

.DzBR{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    width:350px;
    height:70px;
    letter-spacing:2px;
    color:black;
    transition: ease-out 0.4s;
    background-color:white;
    float:right;
    position:relative;
    box-shadow:black;
    border-color:rgb(0, 0, 0);
    top:-870px;
    left:350px;
    box-shadow:inset 0 0 0 0 white;
    border:solid;
}

.DzBR:hover{
    cursor:pointer;
    box-shadow:inset 350px 0 0 0 black;
    color:white;
    border-color:white;
    border-width:2px;
}
}

/*MOBILE*/
@media only screen and (max-width: 850px) {

    body{
        all:unset;
        background-color:white;
        text-align:center;

    }   

    h1{
        font-family: 'Source Sans Pro', sans-serif; 
        font-size:60px; 
        text-decoration: underline black;
    }

    .background-box{
        background-color: unset;
        background-color: white;
    }
    
    
    .Dezi{
        width:500px;
        height:40px;
        font-size:25px;
    }
    
    .rechnen{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:20px;
        height:70px;
        width:400px;
        background-color:white;
        border-width:2px;
        border-color:black;
        border:solid;
        border-width:2px;
        box-shadow: inset 0 0 0 0 white;
        transition:ease-out 0.8s;
    }
    
    .rechnen:hover{
        cursor:pointer;
        box-shadow:inset 700px 0 0 0 #000000;
        color:white;
        border-color:white;
    }
    
    #operator{
        
    }
    
    .result{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:25px;
    }
    
    .homebutton{
        all:unset;
        all:revert;
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        float:;
        position:relative;
        box-shadow:black;
        border-color:rgb(0, 0, 0);
        top:;
        box-shadow:inset 0 0 0 0 white;
        border:solid;
        
    }
    
    .homebutton:hover {
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
        border-width:2px;
    }
    
    .DzBR{
        all:unset;
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        float:;
        position:relative;
        box-shadow:black;
        border-color:rgb(0, 0, 0);
        top:;
        left:;
        box-shadow:inset 0 0 0 0 white;
        border:solid;
    }
    
    .DzBR:hover{
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
        border-width:2px;
    }


}

<html>
    <head>
    <link href="DzBRstyle.css" rel="stylesheet" type="text/css">
    <title>Dezimal zu Binär Rechner</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

<div class="background-box">

<body>

<h1>Dezimal zu Binär Rechner</h1>

<br>
<br>
<br>
<br>
<br>
<br>



<form action="DzBR.php" method="post">

    <select id="operator" name="operator">
        <option>Dual</option>
        <option>Oktal</option>
        <option>Hexal</option>
    </select>

    <br>
    
    <input class="Dezi" name="Dezi" type="number">
    
    <br>
    <br>
    
    <button name="rechnen" class="rechnen">Rechnen</button>
</form>
</div>

<form action="../hub.php">
<button class="homebutton">Home</button>
</form>

<form action="../Binaer-Dezimal/kayedrechner.php">
<button class="DzBR">Binär zu Dezimal Rechner</button>
</form>

</body>
</html>

Answer 1

以这种方式设置@media。

/* start with common css for desktop and smartphone */
....

/* high resolution (only desktop) */
@media only screen and (min-width: 850px) and (max-width: 2560px) {
  ....
}

/* low resolution (only smartphone) */
@media only screen and (max-width: 849.98px) {
  ....
}

对于高分辨率屏幕，使用 (max-width: 2560px) 并非面向未来。

任何div 都可以使用display: none; 从流中删除。请注意，其中的所有内容也不会显示。

Answer 2

将background-box div 放入 body（不是在它之前）并正确关闭它（使用</div> 标签），然后在需要的地方应用display: none;（即在媒体查询中）。

Answer 3

您可以在 css 中使用 display:none; 来“禁用”一个 div，但也会使 div 中的所有内容不可见。

另一种方法是visibility: hidden;，它使 div 不可见，但仍占用网站空间