响应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的手机/小屏幕

回答

相关问题