@media查詢看起來不錯，但不起作用

沒有@media查詢的一個簡單的測試，看看是什麼在起作用： http://www.casedasole.it/km2014/test.html @media查詢看起來不錯，但不起作用

在test.css有一個@media查詢應該 - 如果我理解媒體查詢 - 在橫向平板電腦上將背景顏色從黑色更改爲紅色（1024x768）。 css驗證，xhtml驗證，但是使用Chris Pederick的Web Developer Extension - > View Responsive Layouts以及transmog.net iPad模擬器（我沒有iPad），後臺在FF中保持黑屏。

如果有人可以解釋爲什麼它不起作用，我相信我會在媒體查詢中獲得樂趣。

來源

2014-01-06 plugincontainer

你必須在文檔的開始。這可能會使事情混亂。你應該刪除它。另外，請考慮放置HTML5文檔類型。 –

我刪除它，再次測試，但沒有任何改變。文檔聲明是<？xml version =「1.0」？>，因爲這是我見過的針對手機網站所必需的。 – plugincontainer

您有兩種聲明，其中沒有一種是HTML5文檔類型。我相信HTML5 doctype是移動網站的一種選擇。 –

首先關閉所有，這些都是最好的斷點

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or  @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

現在，在你的情況下，使用該媒體查詢，而不是

@media (max-width:1024px) { 
html, body { 
    background-color: #f00; 
    color:#000; 
    } 
}

來源

2014-01-06 23:16:36

啊，是的。使用「@media（max-width：1024px）」而不是「@media screen」和「（最大設備寬度：1024px）」改變了一切。我注意到的第一件事是從移動肖像（320x480）到平板電腦景觀（1024x768）的每個響應式佈局中，背景都變爲紅色。那是它點擊的時候 - 我測試的是改變1024像素寬度的平板電腦的樣式。因此，以紅色背景爲例，我應該使用的是「@media（min-width：1024px）」，它將背景僅改變爲1024px的紅色。有用。 – plugincontainer

我認爲你需要一個';''color'之後'＃000'（make'color：＃000;'） – Joe

@Joe謝謝。編輯 –

你需要修復您的媒體查詢，使用max-device-width無效，您可以改爲使用max-width。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <style type="text/css"> 
     html, body { 
      height: 100%; 
      font-size: 12px; 
      text-align: left; 
      margin: 0; 
      padding: 5px; 
      background-color: #000; 
      font-family: verdana,arial,geneva,helvetica,sans-serif; 
      color: #fff; 
      text-align: center; 
     } 
     /* iPad and other tablets (landscape) */ 
     @media screen and (max-width: 1024px) { 
      html, body { 
       background-color: #f00; 
       color: #000; 
      } 
     } 
    </style> 
</head> 
<body> 
    <h1>Why is background not red in iPad landscape 1024px??</h1> 
</body> 
</html>

來源

2014-01-06 23:17:06

謝謝。請參閱上面Vim Bonsu的回答。 – plugincontainer

而且它似乎工作，如果你使用「@media只有屏幕和（最大寬度：1,024）」

來源

2014-01-06 23:17:59 Endanke

@media查詢看起來不錯，但不起作用

回答

相關問題