HTML基础知识:当前合适的视区大小是多少？

Question

在这个问题上有很多不同的观点，但在设计网页时，你应该考虑的最佳窗口大小或视窗大小是多少？现在假设你想要迎合广大公众(这意味着你应该创建一个游戏网站，人们在那里滚动不会有800x600的屏幕……)

另外，最好是让main包含的div保持一个自动大小(这样它就可以随着屏幕的大小而伸展，假设里面没有任何不想伸展的固定元素)，还是固定宽度？我设计了一些网站，但我仍然不确定2012年的最佳实践是什么。

Answer 1

有关响应式Web设计的更多信息，请查阅。它的基本轮廓是:你应该设置你的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

就像我说的..。但不用担心目前流行的设备尺寸...只是调整大小，直到它看起来很丑陋。然后创造一个转折点。所以它在任何东西上都会看起来很棒。

/* 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宽度+响应使用媒体查询最小宽度: 780px和480px。