css - 媒体查询将网站变成移动网站

Question

为了构建自己的网站，我一直在查看一些网站，我注意到当您放大超过某个百分比时，该网站会模拟移动显示。没有水平滚动条出现，一切都适合页面，只有页面长度增加。

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

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

如果可能的话，你能用示例 CSS 引导我吗？

谢谢

Answer 1

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

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

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