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

刚刚花了几个小时写了一个新的网站...在我的分辨率，1366x768 ...看起来不错...但是，即使下降到1024x768意味着不是所有的东西都适合屏幕宽度！如何确保网站适合所有屏幕分辨率？

尝试：

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

这确实对我的决心一定的效果，但对较小的分辨率没有影响...... 如何确保我的网页将在所有的屏幕分辨率适合100％？

来源

2010-07-20 David

我使用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%;}

来源

2010-07-20 16:28:43

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

来源

2010-07-20 16:26:42 JAB

没错。几乎不可能确保一个网站适合“所有屏幕分辨率”;您应该专注于使您的网站适合最流行的解决方案（位于目标人群中），并且可以在尽可能广泛的解决方案中使用。 – 2010-07-20 16:36:47

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

除此之外，请确保您的布局不是“硬性”的，即不要将表格视为div。根据父级的百分比制作宽度，或者使用浮动来使它们正确排列。您网站的“最小宽度”（通常为800或1024）是可以接受的，因为古代分辨率（如640x480）的用户只需滚动即可。

您可能需要返回到您的CSS绘图板，并设计它来重新调整自己，和/或有一个最小宽度。

来源

2010-07-20 16:27:32 Paul

+1 [SimpleBits]（http://simplebits.com/）只是使用媒体查询重新设计的。如果你想看到这种方法的潜力，那么在24英寸的显示器上，从全屏开始，将其拖到100px宽，这让我流口水！ – kingjeffrey 2010-07-20 17:14:24

这里是关于[媒体查询]（http ：//www.alistapart.com/articles/responsive-web-design/）A List Apart。 – kingjeffrey 2010-07-20 17:15:27

您的身体标记的CSS看起来OK。但是如果例如你身体中的所有DIV都有固定的大小，它们将永远不会填满整个宽度。你可以发布你的网页的例子吗？

来源

2010-07-20 16:27:42 2ndkauboy

人们往往使网站960px宽。

很容易拆分成大小可调的列，因为它可以被3,4,5,6,8,10,12,15和16整除，再加上它可以很好地适用于最小（值得）的分辨率1,024像素。

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

来源

2010-07-20 16:29:24 theorise

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

我个人最喜欢的是Blueprint，因为他们照顾的东西，如印刷术和格式不仅是网格布局，这就是你所追求的。

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

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

来源

2010-07-20 16:37:15

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

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

您可以在CSS-Tricks阅读更多内容。

来源

2010-07-20 16:57:13

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

回答

相关问题