媒體查詢問題

我在遇到移動設備時無法按比例製作內容比例。媒體查詢問題

在桌面網站看起來像這樣http://imgur.com/a/hhsIb（第1圖像）

我設定一個媒體查詢，使它看起來像這樣（第二圖像）

@media only screen and (max-width: 867px) { 
#header-wrap{ 
padding: 0px 0px 0px; 
max-height: 100%; 
} 

.right.nav { 
    float: none; 
} 
.nav{ 
} 
ul { 
display:inline-block; 
padding: 0px 10px 0px; 
min-width: 300px; 
} 
.left { 
float: none; 
} 
.logo{ 
margin:auto 

} 
}

但是，當移動設備上查看它看起來像桌面（第三圖像）

我也試圖讓導航從浮動右移到中心對齊，一旦它擊中查詢，但我不知道如何去做。

這裏的JS小提琴http://jsfiddle.net/u9shm5af/

來源

2014-12-04 Robbie Fikes

確保在文檔的頭部包含'viewport'元素。否則，媒體查詢將不起作用。例如。 '' – 2014-12-04 23:54:23

你需要視meta標籤添加到文檔的<head>部分：

<html> 
    <head> 
    <title>Robert Fikes</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

移動瀏覽器，如果沒有這個標籤，呈現網頁內容在一個固定的寬度，以便沒有響應式風格的舊網站不會被切斷。

從Safari Developer Library：

大多數網頁很好地適合於與設置爲在縱向方向980個像素的視口寬度的可見區域，如圖3-10所示。如果iOS上的Safari沒有將視口寬度設置爲980像素，則只會顯示網頁的左上角（灰色顯示）。但是，此默認設置不適用於所有網頁，因此，如果您的網頁不同，則需要使用視口元標記。

來源

2014-12-04 23:59:59 user2301192

謝謝，非常感謝！ – 2014-12-05 01:47:44

媒體查詢問題

回答

相關問題