我正在尝试设置一个基本的响应式 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;
}
}