5

对此有很多不同的看法，但是在设计网页时，您应该满足的最佳窗口大小或视口大小是多少？现在这是假设你想迎合广大公众（这意味着你应该创建一个游戏网站，那里的人不会有 800x600 的屏幕......）

此外，最好将包含主的 div 保留为自动大小（以便它随着屏幕大小而拉伸，假设您没有任何不想拉伸的固定元素）还是固定宽度？我设计了一些网站，但我仍然不确定 2012 年的最佳实践是什么。

4

5 回答 5

5

在响应式网页设计上查找更多信息。它的基本轮廓是：您应该使用媒体查询设置您的 css 并调整您的样式以适应各种尺寸。%您还应该使用 more和 less来设计更流畅的布局px。

我认为这些是响应式设计中非常常见的媒体查询：

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

将此添加到您的 html 的顶部：

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

如果您想拥有单独的样式表，以便您的用户不必下载一个怪物样式表，请这样做：

`<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />`
于 2012-07-16T17:19:59.767 回答
2

就像 imakeitpretty 说的那样......但不要担心当前流行的设备尺寸......只需调整大小直到它看起来很难看......然后制作断点......所以它看起来很棒。

/* break point 01 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 02 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 03 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}
于 2012-07-16T19:51:57.500 回答
1

我会说 940 像素宽度 + 响应式使用媒体查询最小宽度：780 像素和 480 像素。

于 2012-07-16T17:16:29.840 回答
1

最佳尺寸是查看您网站的显示器的尺寸。
正如j08691指出的那样，响应式是 2012 年的最佳实践。响应式设计虽然听起来像一个空洞的流行语，但确实很有用。您的内容始终与查看者浏览器的大小相同。

使用带有流体网格的媒体查询会产生最佳外观和最有用的结果。如果您不热衷于编写自己的代码，请查看现有的，例如响应式网格系统。

于 2012-07-16T17:22:26.120 回答
0

960px 一直是一个坚实的标准宽度。

推理放在另一个 SO question here中。

了解您的用户确实很重要，但您所说的关于游戏玩家的内容是完全正确的。

我不熟悉响应式，但这看起来也很有希望

于 2012-07-16T17:44:19.357 回答