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

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" />`