Question

在HTML / CSS方面，我需要做些什么来设计类似于Project Tango和Relevant Magazine的网页

当我放大（通过桌面浏览器）大约200％时，网站的布局会发生变化，顶部的整个导航栏会变成3个平行线。
网站内容也会自动调整为不超出水平视图，因此，不需要水平滚动。
当我浏览这些页面时，此网站布局会自动调整我的Android浏览器。

我如何实现这一目标？

很抱歉，如果有类似的问题已被提出/张贴，但老实说我不知道怎么描述它才能找到它。谷歌搜索我可以想到的所有可能的术语（从缩放级别到HTMLL5和CSS3）来描述它但没有出现。

谢谢！

Answer 1

它不是缩放级别，它的设备/视口尺寸。

这称为响应式布局。

您可以使用媒体查询执行此操作。例如，这会在大于600px的屏幕上变为红色：

@media (max-width: 599px) {
    body {
        color: black;
    }
}

@media (min-width: 600px) {
    body {
        color: red;
    }
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

当您放大时会发生什么，即使＆＃34;物理＆＃34;窗口的大小保持不变，浏览器使用较小的虚拟屏幕进行渲染，然后将渲染的图像适合您的实际视口大小。您不会获得模糊的图像，因为它们会巧妙地更改渲染分辨率，因此他们可以在最小或在某些情况下零质量损失的情况下重新调整其输出大小。目前大多数行业领先的浏览器都使用它。

如果您需要使用缩放级别，而不是媒体查询，那么我担心您只能使用棘手的选项。每个浏览器处理不同的缩放。例如，某些浏览器仅增加font-size。几年前，绝大多数浏览器都使用这种方法。今天大多数浏览器都会缩放整个页面因此，不同浏览器和不同版本的规格可能会有所不同。因此，您需要以某种方式模拟缩放，以实现一致的体验。这似乎不是一个好主意。

网页设计 - 缩放级别更改网站布局

1 个答案: