html - @media only screen and (max-device-width : 480px) didn't work

Question

我已经放了< meta name="viewport"content="width=device-width, initial-scale=1.0"> 在头部。但是 @media only screen 和 (max-device-width : 480px) 只会工作 1 秒，然后更改为 720px 和 1333.41px CSS。

我正在尝试将背景图片更改为 480px 和 720px，720px 和 1333.41px 效果很好，只有 480 不行。怎么办？

480px 现在的样子

背景应该是什么样子

这是我的样式标签

<style>
    body{
        /* background-image:url(Background1.png); */
        background-image:url(Background-013.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
    .style {
        max-width: 500px;
        margin: auto;
        color: Black;
        font-family: Roboto-Regular;
        padding: 30px;
        background-color:rgba(255, 255,255, 0.4);
        border-radius: 15px;
        margin-top: 300px;
    }
    .style2 {
        max-width: 500px;
        margin: auto;
        color: Black;
        font-family: Roboto-Regular;
        padding: 30px;
        background-color:rgba(255, 255,255, 0.4);
        border-radius: 15px;

    }
    .form-control{
        background-color:rgba(255, 255,255, 0); 
        color: white;
    }
    .form-label{
        color: white;
    }
    .dropdown{
        text-align:left;
    }
    .langkah {
        text-align: left;
        vertical-align: middle;
    }
    #email, #nama,#lomba,#idLine,#bukti{
    border-radius: 0;
    /* border-color: white; */
    } 
    input[type=file]::file-selector-button{
        background-color: #DA4327;
        color: white;
    }
    #submit{
        background-color: #DA4327;
        border-radius: 0;
        border-color: #DA4327;
    }
    #klikLangkah {
        width: 100%;
        text-align: center;
    }
    .judul{
        height: 300px;
        width: auto;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
    }
 
    @media only screen and (max-device-width : 480px){ 
        .judul{
        content: url(3.png) !important;
        height: 50%;
        position: absolute;
        max-width:480px;
        top: 0;
        right: 0;
        left: 0;
        } 
        body{
        background-image:url(Bg phone.png) !important;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        }
    }
    @media only screen and (max-width:1333.41px) { 
        .judul{
            content: url(3.png) !important;
            top: 0;
            width:auto;
            height:50%;
            right: 50px;
            margin: auto;
            position: absolute;
        } 
    }
   
    @media only screen and (max-width:720px){ 
        .judul{
            content: url(3.png) !important;
            width:auto;
            height: 50%;
            position: absolute;
            max-width:720px;
            top: 0;
            right: 0;
            left: 0;
        } 

        body{
        background-image:url(Background-02720.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        }
    }
  </style>

 <div class="container">
    <img class="judul" src="Ayuk Daftar2.png">
</div>
    
  <!--form-->
    <form class="style" method="POST" action="pendaftaran.php" enctype="multipart/form-data">
        <div class="mb-3 ">
                <select class="dropdown form-control" name="lomba" id ="lomba" style="background-color: #F7B21A;color: white;"> 
                    <option style="text-align:center; color: white;">Pilih lomba mu di sini!</option>
                    <?php
                        while($row = $result->fetch_assoc())
                        {
                    ?>
                    <option value="<?php echo $row['id'];?>"><?php echo $row['lomba'];?></option>
                    <?php
                    }?>
                </select>
            </div>
        </div>
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Nama</label>
            <?php
            if(isset($_SESSION['name'])){
                $nama = $_SESSION['name'];
            }
            else{
                $nama = "";
            }
            ?>
            <input type="text" class="form-control" name="nama" id="nama" value ="<?php echo $nama?>" >
        </div>
        <div class="mb-3">
            <?php
            if(isset($_SESSION['mail'])){
                $e_mail = $_SESSION['mail'];
            }
            else{
                $e_mail = "";
            }
            ?>
            <label for="exampleFormControlInput1" class="form-label">Email</label>
            <input type="email" class="form-control" name="email" id="email" value ="<?php echo $e_mail?>" >
        </div>
        <div class="mb-3">
            <?php
            if(isset($_SESSION['line'])){
                $lineID = $_SESSION['line'];
            }
            else{
                $lineID = "";
            }
            ?>
            <label for="exampleFormControlInput1" class="form-label">ID Line</label>
            <input type="text" class="form-control" name="idLine" id="idLine" value ="<?php echo $lineID?>" >
        </div>
        <div class="mb-3">
            <label for="formFile" class="form-label">Bukti pembayaran (harus 1)</label>
            <input class="form-control" name="bukti" type="file" id="bukti">
        </div>
        <button type="submit" class="btn btn-primary" id="submit" style="margin-right: 100px">Submit</button>
        <button type="button" class="btn" id="klikLangkah" data-toggle="collapse" data-target="#langkah" style="color: white;">*klik untuk langkah-langkah <br> &nbsp; melakukan pendaftaran</button>
    </form>

Answer 1

试试这个

@media only screen and (max-width : 480px){ 
    .judul {
        content: url(3.png) !important;
        height: 50%;
        position: absolute;
        max-width:480px;
        top: 0;
        right: 0;
        left: 0;
    } 

    body {
        background-image:url(Bg phone.png) !important;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
}