如何在@media媒体查询中禁用div样式，解决移动端真机适配异常问题

问题原因及解决方案 #

1. HTML结构非法
   你将.background-box容器放在了<head>结束标签和<body>开始标签之间，属于不符合规范的嵌套结构，浏览器模拟器和真机对非法结构的解析逻辑差异极大，是样式不一致的核心诱因。需将.background-box容器移动到<body>标签内部。

2. 媒体查询范围重叠
   桌面端媒体查询使用max-width: 2560px，会覆盖所有宽度小于2560px的设备，包含移动端设备。两个媒体查询规则存在重叠区间，不同浏览器对重叠区间的样式优先级处理逻辑不同，导致真机样式异常。需将桌面端媒体查询改为min-width: 851px，确保桌面和移动端的媒体查询范围完全独立，无重叠冲突。

3. 背景色设置不符合需求
   你的需求是移动端实现纯净黑色UI，但原有代码中移动端的body和.background-box都设置了白色背景，需要修正为黑色。同时.background-box直接设置透明即可，继承body的黑色背景实现纯净效果。

4. 存在无效CSS属性
   代码中存在float:;、top:;、left:;这类无属性值的无效规则，部分移动端浏览器会继承桌面端的对应属性值，导致布局错位，需删除所有无效的空属性。

5. 全局重置属性兼容性差
   部分移动端内置浏览器对all:unset、all:revert这两个全局重置属性的支持度较差，不要使用全局重置，改为单独重置需要覆盖的属性即可。

修正后代码 #

HTML代码

<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>
<body>
    <div class="background-box">
        <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>

CSS代码

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

/*Desktop*/
@media only screen and (min-width: 851px) {
    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:2px solid black;
        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;
        border:2px solid black;
        top:-935px;
        box-shadow:inset 0 0 0 0 white;
    }
    .homebutton:hover {
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
    }
    .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;
        border:2px solid black;
        top:-870px;
        left:350px;
        box-shadow:inset 0 0 0 0 white;
    }
    .DzBR:hover{
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
    }
}

/*MOBILE*/
@media only screen and (max-width: 850px) {
    body{
        background-color:black;
        text-align:center;
        margin:0;
        padding:0;
    }   
    h1{
        font-family: 'Source Sans Pro', sans-serif; 
        font-size:40px; 
        text-decoration: underline black;
        color:white;
    }
    .background-box{
        background: transparent;
        width:100%;
        text-align:center;
    }
    .Dezi{
        width:90%;
        max-width:500px;
        height:40px;
        font-size:25px;
    }
    .rechnen{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:20px;
        height:70px;
        width:90%;
        max-width:400px;
        background-color:white;
        border:2px solid black;
        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;
    }
    .result{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:25px;
        color:white;
    }
    .homebutton{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:90%;
        max-width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        border:2px solid black;
        margin:20px auto;
        display:block;
        box-shadow:inset 0 0 0 0 white;
    }
    .homebutton:hover {
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
    }
    .DzBR{
        font-family: 'Source Sans Pro', sans-serif;
        font-size:22px;
        width:90%;
        max-width:350px;
        height:70px;
        letter-spacing:2px;
        color:black;
        transition: ease-out 0.4s;
        background-color:white;
        border:2px solid black;
        margin:20px auto;
        display:block;
        box-shadow:inset 0 0 0 0 white;
    }
    .DzBR:hover{
        cursor:pointer;
        box-shadow:inset 350px 0 0 0 black;
        color:white;
        border-color:white;
    }
}

内容的提问来源于stack exchange，提问作者Timothy Kardel