Question

我正在网站上工作，并希望在调整浏览器窗口大小时缩放内容。这是我正在尝试achieve的一个例子。继续并重新调整浏览器的大小，看看我在追求什么。有人能告诉我作者是如何实现这一目标的吗？或者这种技术被称为什么？我已经很好地处理了CSS并了解了液体布局，但是这个网站使用的技术非常独特。我无法绕过他如何设法扩展网站的许多部分，即使是侧面的小图片缩小。有人能告诉我这是如何实现的吗？我真的在追求技术的概念或名称。谢谢。

Answer 1

它被称为响应式设计，并且有关于该主题的pretty good book。

简单来说，它利用媒体查询来调整您的内容以适应各种分辨率。

/* 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

Here's a link from "A List Apart"。他们使用流体网格和媒体查询来确保窗口的内容大小。这篇文章有代码，所以你可以看到发生了什么。

Answer 3

我认为这就是这条线，因为我检查了他的css和javascript函数，那里什么都没有。试一试，看看它是否有效。

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

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

3 个答案: