WordPress 博客响应能力答案

【问题标题】：WordPress blog responsivenessWordPress 博客响应能力
【发布时间】：2014-06-02 02:21:28
【问题描述】：

我们的company website 是用 WordPress + Forest 主题构建的。

要获得全宽博客，我们必须从相关模板中删除侧边栏并添加以下自定义 CSS：

blog .site-content, .single .site-content  { width: 70%; max-width: 70%; margin: auto; }

这适用于桌面和大多数其他设备和屏幕尺寸。

但是，智能手机的显示效果不是很好，因为两边的边距太大。

因此，我们尝试实现以下自定义 CSS 来解决此问题，但它似乎并没有改变智能手机上的显示：

@media (min-width: 992px) .blog .site-content, .single .site-content  { width: 90%; max-width: 90%; margin: auto; }

知道这里出了什么问题以及如何解决吗？

谢谢。

【问题讨论】：

最小宽度 992px!?我不知道有多少智能手机具有最小宽度。查看 iphone 备忘单以获取最小宽度建议并尝试一下。

标签： css wordpress responsive-design smartphone

【解决方案1】：

如果您希望在较小的显示器上使用较小的边距，则应该是

@media (max-width: 992px) {
   .blog .site-content, .single .site-content { 
        width: 90%; max-width: 90%; margin: auto; 
   }
}

【讨论】：

感谢 Andrei，它完全解决了问题。

【解决方案2】：

您的@media 代码缺少一些花括号（{ 和}），您需要使用max-width，而不是min-width。我通常也会在我的移动 CSS 中添加 @media handheld。

@media (max-width: 992px),
@media handheld {
    .blog .site-content, .single .site-content { 
        width: 90%; max-width: 90%; margin: auto; 
    }
}

【讨论】：