嘗試媒體查詢，無法讓他們工作

我對CSS相當陌生，正在嘗試媒體查詢。我在Stackoverflow和其他網站上的其他帖子上關注了很多人的建議，但無法讓他們工作。我只是試圖改變框的顏色，當屏幕低於一定的寬度。
這裏是我的代碼：嘗試媒體查詢，無法讓他們工作

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" name"viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> 
    </head> 
    <body> 
    <span class="boxes" id="b1">Box 1</span> 
    <span class="boxes" id="b2">Box 2</span> 
    <span class="boxes" id="b3">Box 3</span> 
    <span class="boxes" id="b4">Box 4</span> 
    <span class="boxes" id="b5">Box 5</span> 
    </body> 
</html>

CSS文件：

.boxes { 
    height: 200px; 
    width: 200px; 
    color: #FFF; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 80px; 
    margin: 20px; 
    top: 100px; 
    position: relative; 
    background-color: red; 
} 

@media only screen and (max-width:600px) { 
    .boxes { 
    background-color: #000000; 
    } 
}

我曾嘗試：
* @media screen沒有的only字在CSS文件。
*編號爲media="screen"的html鏈接標記。
* max-device-width在CSS文件中。
* media="only screen and (max-device-width: 600px)"在HTML鏈接標記中。

沒有我試過的工作，我錯過了什麼？

來源

2016-07-05 yasgreen

你試過'分鐘，width'？也許即使'！important'標誌 –

剛剛測試過，它正在工作，你的問題是在你的CSS文件中覆蓋這個屬性 – dippas

@WesFoster不建議使用'！important' – dippas

您在視口元標記中缺少等號。你的代碼在你放置它時會起作用。 NAME = 「視口」

來源

2016-07-05 22:01:31 Vcasso

不是問題;）http：// serpa。 eusou.com/SO/bts.html – dippas

在您的示例中，您完全採用了元視口。你應該把它恢復正確的語法，它會工作！ – Vcasso

我拿出來顯示它沒有meta標籤 – dippas

確保將<meta>標籤更改爲：

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

你可以嘗試指定背景色：

@media screen and (min-width:601px) { 
.boxes { 
    background-color: red; 
    } 
}

同樣，你對我的作品原樣，但也許通過指定僅在601px以上的紅色的背景顏色將工作。

.boxes { 
 
    display: inline-block; /* Added this so they don't overlap */ 
 
    height: 200px; 
 
    width: 200px; 
 
    color: #FFF; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 80px; 
 
    margin: 20px; 
 
    top: 100px; 
 
    position: relative; 
 
    
 
} 
 
@media screen and (min-width:601px) { 
 
.boxes { 
 
    background-color: red; 
 
    } 
 
} 
 
@media screen and (max-width:600px) { 
 
    .boxes { 
 
    background-color: #000000; 
 
    } 
 
}

<span class="boxes" id="b1">Box 1</span> 
 
<span class="boxes" id="b2">Box 2</span> 
 
<span class="boxes" id="b3">Box 3</span> 
 
<span class="boxes" id="b4">Box 4</span> 
 
<span class="boxes" id="b5">Box 5</span>

來源

2016-07-05 22:30:27

meta標籤在這裏不是問題http://serpa.eusou.com/SO/bts.html，並且您測試的其他媒體查詢不會做太多 – dippas

然後是什麼問題？是否有某些情況下盒子不會改變顏色？我在測試時沒有問題，所以很難理解問題所在。 –

嘗試媒體查詢，無法讓他們工作

回答

相關問題