0

我刚开始使用 HTML5 开发一个针对所有手机、平板电脑和台式机的网站。谷歌搜索后，我知道使用下面的标签会根据所有形式因素的需要重新调整我们的网站：

<meta name="viewport" content="width=device-width" />

所以我只是尝试了一下，它看起来就像一个魅力，但我看到当我们在桌面上查看这个网站（带有 19 英寸显示屏）时，所有元素看起来都像是被拖过屏幕以使其 100% 适合屏幕，这对我来说看起来有点奇怪。

那么是否有任何选项可以使网站的主要内容（具有固定宽度）居中，在桌面上查看时背景图像跨越整个屏幕，但在较小形式的屏幕上查看时缩小背景图像因素。

举个例子，如果我们看到 Twitter，它的行为方式就像我建议的那样，用背景图像将主要内容居中，当我们减小屏幕尺寸时，它会缩小背景，但会尝试保持内容大小不变。

如果 HTML5 或 CSS3 中有任何新属性可以实现这一点，谁能建议我。

4

3 回答 3

0

改用流体布局 https://www.google.com/search?q=fluid+layout+examples

如果您想让网站响应式，请参阅CSS 媒体查询

于 2013-04-09T12:03:24.840 回答
0

我不建议从头开始这项任务，因为有太多其他人已经在浪费时间的问题和故障。

如果你喜欢 Twitter 风格，他们的布局和 JS 库实际上是开源的（称为“Bootstrap”），所以你可以从他们的解决方案中获利：http: //twitter.github.io/bootstrap/ （看看看你喜不喜欢的例子）

我最近通过伟大的 Initialzr ( http://www.initializr.com/ ) 开始了一个 Bootstrap 项目......他们的座右铭是“在 15 秒内启动一个 HTML5 项目！”，所以也许对你来说也是正确的？如果您认为 Bootstrap 可能很重，还有很多其他选择！

于 2013-04-09T12:44:19.120 回答
0

您绝对应该看看Media Queries (W3C)。使用它们允许您根据屏幕分辨率、视口宽度甚至屏幕的方向（横向或纵向）使用不同的 CSS 规则。

这是一个最小的例子：

@media all {
    #wrapper {
        /* have some whitespace on the left and right */
        width: 80%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 800px) {
    /* on small screens, use the full width */
    #wrapper {
        width: 100%;
    }
}

如您所见，首先定义您的总体布局，@media all { }然后为较小的设备调整布局是很聪明的。要查看一些示例，请查看mediaqueri.es

于 2013-04-09T12:12:45.067 回答