适用于手机/小屏幕的响应式 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12307064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive CSS for phones/small screens
提问by MrGlass
I am trying to setup a basic responsive wordpress theme. To start, I grabbed the toolbox theme from wordpress.org and added twitter bootstrapresponsive css/js.
我正在尝试设置一个基本的响应式 wordpress 主题。首先，我从 wordpress.org 获取了工具箱主题，并添加了twitter bootstrap响应式 css/js。
I added some basic test styles, just to reduce the padding on smaller screens and change the color to indicate that its working. For some reason, the styles for landscape phones are not working.
我添加了一些基本的测试样式，只是为了减少较小屏幕上的填充并更改颜色以表明其工作正常。出于某种原因，横向手机的样式不起作用。
You can view my site here.
你可以在这里查看我的网站。
My responsive CSS code:
我的响应式 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;
}
}
采纳答案by defau1t
It looks like you haven't set the meta tag for viewport properly:
看起来您没有正确设置视口的元标记：
It should be like below:
它应该如下所示：
<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />
