10

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

我添加了一些基本的测试样式,只是为了减少小屏幕上的填充并更改颜色以表明它可以正常工作。出于某种原因,横向手机的样式不起作用。

你可以在这里查看我的网站。

我的响应式 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;
    }
}
4

1 回答 1

7

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

它应该如下所示:

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />
于 2012-12-13T07:13:36.430 回答