與響應網頁設計混淆，似乎無法使其工作

發生了什麼事情只是文本正在改變，沒有別的。當屏幕尺寸發生變化時，我似乎無法操作div。我已經設置了相關的meta標籤。在我的桌面上的實際文件上的語法是正確的（如在網頁上有<樣式> < /樣式>標籤（我在一頁上做所有事情，以便我可以更容易地引用事情），我會移動他們在.css文件後面）。我只是試圖展示我有什麼，然後再潛入我的代碼。此外，它不是全部，只是相關的東西。如果不止於此需要，請讓我知道，但有一點不工作（這應該告訴你，我已經搞砸）是，背景圖像沒有被添加在頁面的尺寸重新調整。與響應網頁設計混淆，似乎無法使其工作

<meta name="viewport" content="width=device-width, initial-scale=1"> 
@media screen and (max-width: 35em) { 
      body { 
       font-size:10px; 
       background-image: url("http://hdwallpapersx.com/wp-content/uploads/2013/09/Awesome-Background-Hd-Wallpaper.jpg?c09534"); 
       background-color: #000; 
       color: #F0F; 
      } 
      .logo { 
       position:absolute; 
       top:0px; 
       left:0px; 
       width:100%; 
       height:50px; 
       background-color: rgba(0,0,0,.7); 
       border:none; 
       border-radius:0px; 
       padding-top: 15px; 
       font-size:15pt; 
      } 
      .bt { 
       font-family: Tahoma; 
       font-size:15pt; 
      } 
      nav { 
       position:absolute; 
       top: 51px; 
       width: 100px; 
       height: 30px; 
      } 
      nav ul li { 
       padding-left: 10px; 
       float: left; 
      } 
     } 
     html { 
      width: 100%; 
     } 
     body { 
      width: 99%; 
      background-color: #000; 
      background-image: url(""); 
      background-size: 100%; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      color: #CCC; 
     }

來源

2013-10-07 Ancestral Nyx

CSS它解釋從上到下，在同一個媒體聲明中，你的css中有兩條規則，所以最後一條會覆蓋這條規則屬性先前在第一個聲明。這就是爲什麼你沒有看到背景圖像。

我建議你以等級順序聲明你的規則以避免這種麻煩。

來源

2013-10-07 14:51:38

那麼我需要爲每種顯示尺寸設置一個規則嗎？例如，設置最小寬度的規則與最大寬度相反？而不是把它放在公開場合？ –

媒體查詢是有條件的規則，必須覆蓋先前聲明的主規則 –

這裏是一個[示例]（http://codepen.io/anon/pen/duoBq），調整屏幕大小並查看值如何被覆蓋。響應式佈局並不意味着您必須使用@media聲明編寫代碼，只需覆蓋它的必要內容即可。 –

與響應網頁設計混淆，似乎無法使其工作

回答

相關問題