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

【问题标题】：How to create a responsive design with CSS only如何仅使用 CSS 创建响应式设计
【发布时间】：2012-08-28 03:01:39
【问题描述】：

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

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

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

感谢您的任何想法！

【问题讨论】：

【解决方案1】：

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

例子：

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

@media 块内的所有内容仅在屏幕宽度为 750 像素或更小的情况下才会应用。

您还可以执行min-width 之类的操作或将两者结合使用。

【讨论】：