媒体查询将网站转变为移动网站

Question

我一直在寻找几个网站，以构建我自己的网站，我注意到当你放大超过一定百分比时，网站会模仿移动显示。没有水平滚动条出现，一切都适合页面，只有页面长度增加。

以下是一些示例网站 - https://generalassemb.ly/，http://learnlayout.com/，http://dev.opera.com/

我不确定他们如何实现这是他们的设计，并在网上搜索了解释。

如果可能，您可以通过示例CSS引导我完成它吗？

谢谢

Answer 1

这与缩放无关，但是与窗口的当前宽度有关（至少在您的示例中，当您将浏览器的窗口更改为较小的大小时会发生相同的情况），他们很可能使用CSS媒体查询根据宽度应用条件样式。

示例（来自第一个google结果http://css-tricks.com/css-media-queries/）

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}