Question

花了几个小时写了一个新网站...在我的分辨率看起来很棒，1366x768 ......但是，即使下降到1024x768也意味着不是所有东西都适合屏幕宽度!!

试过：

<style type='text/css'>
    body {width:100%;}
</style>

这对我的分辨率有一些影响，但对较小的分辨率没有影响...... 如何确保我的网页在所有屏幕分辨率下都能100％适合？

Answer 1

我很遗憾地使用CSS @media指令，IE8不支持。符合标准的CSS3允许您根据视口的宽度进行不同的样式：

<style type="text/css">
@media screen and (min-width:1px) and (max-width:1365px) {
    ...
}
@media screen and (min-width:1366px) {
    ...
}
</style>

顺便说一句，你的CSS中有错误，你忘了指定单位：

body {width:100%;}

Answer 2

您可能感兴趣的一件事是CSS Media Queries。每个浏览器都不支持它们，例如IE只支持版本9预览，但它们可以帮助调整窗口大小以及较小的分辨率，因为您可以对每个屏幕大小应用不同的CSS规则。

除此之外，请确保您的布局不是“严格”的，即不要将div视为表格。根据父项的百分比设置宽度，或使用浮动使它们正确排列。拥有网站的“最小宽度”（通常为800或1024）是可以接受的，即接受640x480等古老分辨率的用户只需滚动即可。

您可能需要使用CSS返回到绘图板并将其设计为重新调整自身，和/或具有最小宽度。

Answer 3

除非您想以百分比进行所有尺寸测量，否则我认为您无法做到。即便如此，如果有人使用不同宽高比或非常低分辨率的分辨率，你会遇到问题，因为在第一种情况下，你的页面会被拉伸或压扁，而在第二种情况下，你可能会遇到布局问题。

Answer 4

您的身体标签的CSS看起来不错。但是，例如，你身体里的所有DIV都有固定的大小，它们永远不会填满整个宽度。你能发一个你的页面的例子吗？

Answer 5

人们倾向于制作960px宽的网站。

很容易分成均匀大小的列，因为它可以被3,4,5,6,8,10,12,15和16整除，而且它非常适合1024px的最小（有价值）分辨率

您当然可以使用流体布局或各种检测屏幕分辨率的方法，但如果您使用大量图像，则会使其成为皮塔饼。

Answer 6

我建议你使用CSS框架。它们为您的设计奠定了基础，因此您不必担心这样的事情。

我个人最喜欢的是Blueprint因为他们会处理排版和表单样式等事情，而不仅仅是网格布局，这就是你所追求的。

960gs是另一种流行的，与蓝图非常相似的方式。他们还有一些工具可以帮助您定制开发，而不是像Blueprint那样限制。

他们是我以前用过的两个，但我确信还有更多的负载。

Answer 7

为最常见的分辨率制作布局样式表...让我们说800x600,1024x767和1280x1024。然后加载：

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />

您可以在CSS-Tricks了解更多信息。

如何确保网站适合所有屏幕分辨率？

7 个答案: