调整浏览器大小时缩放内容

Question

我正在一个网站上工作，并希望在浏览器窗口调整大小时缩放内容。这是我想要实现的一个例子。继续调整浏览器的大小，看看我想要什么。谁能告诉我作者是怎么做到的?或者这个技术叫什么?我已经很好地掌握了CSS，知道液体布局，但在这个网站上使用的技术是非常独特的。我无法理解他是如何将网站的许多部分按比例缩小的，甚至连侧面的小图片也按比例缩小了。有人能告诉我这是如何实现的吗?我真正想要的是技术的概念或名称。谢谢。

Answer 1

这就是所谓的响应式设计，有一本关于这个主题的好书。

用最简单的术语来说，它是利用媒体查询来调整您的内容以适应一系列分辨率。

/* targets screens matching the specific sizes */
@media screen
  and (min-device-width: 320px)
  and (max-device-width: 480px) {
  /* css rules here */
}
@media screen
  and (min-device-width: 481px)
  and (max-device-width: 960px) {
   ...
}
@media screen and (min-device-width: 961px) {
   ...
}

字体的大小取决于你的内容有多宽，以及你使用的是哪种布局，所以你必须针对最适合你需要的特定尺寸。当然还有更多的内容，但是有大量的资源和教程在那里。

Answer 2

这是来自"a List Apart"的链接。他们使用流体网格和媒体查询来确保内容大小与窗口一致。这篇文章有代码，以便您可以看到发生了什么。

Answer 3

我认为这是这一行，因为我检查了他的css和javascript函数，没有任何东西在那里。试一试，看看它是否有效。

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">