在下面的 html 代碼中，我添加了一個分隔線，我希望背景顏色在達到某個像素寬度時變為藍色。現在我的代碼沒有效果。我想讓分隔線變成藍色。我怎樣才能讓它作業？有問題的代碼是@media (min-width: 551px) { div { background-color: Blue } }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media (max-width: 550px) {
p { font-size: 16px; }
}
@media (min-width: 551px) {
p { font-size: 32px; }
}
@media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
uj5u.com熱心網友回復：
您需要!important根據螢屏解析度添加強制CSS。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
@media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
@media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>uj5u.com熱心網友回復：
我假設您希望大螢屏背景顏色為淺灰色，而小螢屏（小于 551 像素）顏色為藍色？
如果是這種情況，您需要在媒體查詢中指定 *max-width。我還會確保您按類呼叫 div，這樣您就不會針對所有 div。
試試這個代碼。
如果我把顏色顛倒了，你就可以切換它們。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
@media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>uj5u.com熱心網友回復：
這有兩個原因不能按照您目前想要的方式作業。
首先，在媒體查詢之外宣告的樣式比在媒體查詢內部宣告的樣式具有更高的“重要性”。為了解決這個問題，您需要使用!importantafter 媒體查詢樣式。
其次，因為您為媒體查詢使用了更通用的物件名稱，所以它不會再有那么多層次結構。而不是 using div，您需要div.example在媒體查詢中使用相同的內容。
所以這兩種解決方案是：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
@media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
@media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520412.html