Question

对此有很多不同的意见，但在设计网页时，您应该提供的最佳窗口大小或视口大小是多少？现在假设您想要满足广大公众的需求（意味着如果您创建一个游戏网站，那里的人们将不会有800x600的屏幕...）

另外，最好将主包含div保留为自动尺寸（这样它会随屏幕尺寸拉伸，假设你内部没有任何不需要拉伸的固定元素）或者你是否修复了宽度？我设计了一些网站，但我仍然不确定2012年的最佳做法是什么。

Answer 1

了解有关响应式网页设计的更多信息。它的基本概要是：您应该使用媒体查询设置您的CSS并调整您的样式以适应各种大小。您还应该使用更多%及更少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" />`

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

Answer 3

我会说940px宽度+响应使用媒体查询min-width：780px和480px。

Answer 4

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

使用具有流体网格的媒体查询可获得最佳外观和最有用的结果。如果你不热衷于编写自己的文章，而不是查看像Responsive Grid System这样的现有文章。

Answer 5

960px一段时间以来一直是稳固的标准宽度。

推理归入另一个SO问题here。

了解您的用户非常重要，您对游戏玩家的评价是完全正确的。

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

HTML基础知识：什么是目前良好的视口大小？

5 个答案: