我已经放了 < 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> melakukan pendaftaran</button>
</form>最佳答案
试试这个
@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;
}
}
关于html - @media only screen and (max-device-width : 480px) didn't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71143172/