響應CSS的手機/小屏幕

我想設置一個基本的響應WordPress主題。首先，我從wordpress.org抓取工具箱主題，並添加了twitter bootstrap響應式css/js。響應CSS的手機/小屏幕

我添加了一些基本的測試樣式，只是爲了減少較小屏幕上的填充並更改顏色以指示其工作。出於某種原因，風景手機的風格不起作用。

您可以瀏覽我的網站here。

我響應CSS代碼：

/* Large desktop */ 
@media (min-width: 1200px) { 
    body { 
     padding-left: 50px; 
     padding-right: 50px; 
     color: green; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 1199px) { 
    body { 
     padding-left: 30px; 
     padding-right: 30px; 
     color: purple; 
    } 
} 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    body { 
     padding-left: 20px; 
     padding-right: 20px; 
     color: blue; 
    } 
} 

/* Landscape phones and down */ 
@media (max-width: 480px) { 
    body { 
     padding-left: 5px; 
     padding-right: 5px; 
     color: red; 
    } 
}

來源

2012-09-06 MrGlass

不僅景觀手機，它也不適用於小平板電腦景觀（800x600），平板電腦肖像（768x1024），平板電腦景觀（1024x768） – defau1t

@refhat好吧，這只是一個開始（尺寸實際上是從他響應式引導程序指南）。我沒有你提到的尺寸的規則，但我確實有一個應該覆蓋手機的規則（<481px寬），我不知道爲什麼它不工作。 – MrGlass

我提到的規則，你不需要打擾他們，只要確保這些跨度按照twitter引導添加到12。至於你的規則，不涵蓋/工作在/ iphone上（481px）。這意味着你還沒有正確設置媒體查詢斷點。 – defau1t

看起來你沒有設置meta標籤視口正確：

應該象下面這樣：

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />

來源

2012-12-13 07:13:36 defau1t

響應CSS的手機/小屏幕

回答

相關問題