HTML 基础 : What is currently a good viewport size?

Question

对此众说纷纭，但在设计网页时，应该迎合的最佳窗口大小或视口(viewport)大小是多少？现在假设您想要迎合广大公众的需求(这意味着如果您创建一个游戏网站，在那里滚动的人不会有 800x600 屏幕...)

此外，最好将包含 div 的主要内容保留为自动大小(以便它随屏幕大小拉伸(stretch)，假设您内部没有任何不想拉伸(stretch)的固定元素)还是固定宽度？我设计了几个网站，但我仍然不确定 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" />`