Question

我正在尝试设置一个基本的响应式wordpress主题。首先，我从wordpress.org抓取了工具箱主题并添加了twitter bootstrap响应式css / js。

我添加了一些基本的测试样式，只是为了减少较小屏幕上的填充并更改颜色以指示其工作。出于某种原因，风景手机的风格无法使用。

您可以查看我的网站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;
    }
}

Answer 1

看起来您没有正确设置视口的元标记：

应该如下：

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

响应式CSS用于手机/小屏幕

1 个答案: