我制作了一個 Binary-Calculator 網站，我希望計算器在灰色背景下，但身體應該是黑色的。所以我在這個灰色背景中制作了一個黑色的身體和一個跨所有元素的 Div。在桌面上一切正常，但現在我開始針對移動設備進行優化，我意識到我必須“禁用”導致灰色背景的 div，因此有一個干凈的黑色 ui 沒有灰色的大背景線。當我在 chromes 模擬手機上測驗我的 @media 查詢時，一切都正確，甚至 div 背景也消失了。雖然當我在手機上測驗它時，它看起來像圖片中的那樣。先感謝您。
模擬電話
電話
桌面 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>uj5u.com熱心網友回復：
您可以使用display:none;in css 來“禁用”一個 div，但也會使 div 中的所有內容不可見。
另一種方法是visibility: hidden;使div不可見，但它仍然占用網站上的空間
uj5u.com熱心網友回復：
把那個background-boxDIV到 了body（之前不是），并關閉它正確地（有</div>標記），然后應用display: none;在需要的地方它（即媒體查詢）。
uj5u.com熱心網友回復：
@media 在像素范圍內不得有間隙或重疊。改用這個。
/* start with common css for desktop and smartphone */
....
/* high resolution (only desktop) */
@media only screen and (min-width: 768px) {
....
}
/* low resolution (only smartphone) */
@media only screen and (max-width: 767.98px) {
....
}
對于非常高解析度的螢屏，使用 (max-width: 2560px) 不是面向未來的。
div可以使用 將任何內容從流中洗掉display: none;。請注意，其中的所有內容也不會顯示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/347766.html