css - 如何仅使用 CSS 创建响应式设计

Question

我见过许多只使用 CSS 来适应移动界面/小屏幕的 WordPress 主题。关于它是如何完成的任何想法？

例如，主题Foghorn有一个侧边栏，它在小于 750 像素宽的屏幕中消失。我查看了代码，我很确定它是用 CSS 完成的。

我想在我正在制作的网站中采用这样的设计。

感谢您的任何想法！

Answer 1

您需要在 CSS 中使用媒体查询。

例子：

@media screen and (max-width: 750px) {
    .someClass {
        display: block;
    }
}

@media仅当屏幕宽度为 750 像素或更小时，才会应用该块内的所有内容。

您也可以做类似的事情min-width或将两者结合起来。