css布局:屏幕分辨率问题

时间:2011-06-17 06:59:50

标签: css

我被困在应该如何处理屏幕分辨率问题....

  1. 如果我设计的是高分辨率(1280像素宽),则在低分辨率显示器上会出现很长的水平卷轴

  2. 如果我为低分辨率设计网站似乎在浏览器上使用了一点空间

  3. 请指导我如何解决这个问题任何帮助将不胜感激

6 个答案:

答案 0 :(得分:2)

谷歌的“响应式网页设计”

答案 1 :(得分:2)

你有两个选择:

1 - 使您的布局宽度约为980px。因此,1024分辨率及更高分辨率的用户将看到所有屏幕而无需滚动。

2 - 使您的布局100%宽度。没有为像素中的元素指定恒定宽度,它们的宽度为百分比。这样每个具有任何分辨率的物体都会看到整个页面没有滚动条。

答案 2 :(得分:2)

有几个建议......

  1. 设计您的网站,使所有内容水平居中,并设计固定宽度。然后确保内容中最重要的部分保留在中心位置。背景图像可以填充背景区域而不会导致水平溢出(显示滚动条)。

  2. 使用水平填充100%的设计,并根据百分比宽度进行展示位置。根据您的设计,这可能会很困难,但是如果您使用#1中的一些固定宽度方面可以提供帮助。

  3. 使用条件CSS加载。如果您确实需要针对不同屏幕尺寸(如移动网站)的不同布局,请仅推荐此项。您可以使用Javascript获取document.body.clientWidth和document.body.clientHeight以获取当前窗口大小并根据此加载内容。但请记住......用户可以调整屏幕大小,使其不会像#1或#2那么大。

答案 3 :(得分:1)

我之前遇到过这个问题...

CSS无法检测屏幕大小,但Javascript可以。我不记得怎么样了。但它可以告诉您浏览器窗口的大小。根据此大小,您可以链接到CSS或其他。

答案 4 :(得分:1)

我总是使用978px网格的设计规则。

#container {
  width: 978px;
  margin: 0 auto;
}

这意味着它适用于低至1024x768的浏览器,并以更高分辨率为中心显示。

答案 5 :(得分:0)

屏幕分辨率问题没有通过任何边距,填充,绝对和相对来解决它的身体元素..... 这是我喜欢的解决方案之一: 在窗口调整大小函数中使用偏移到您想要对齐的另一个元素(偏移顶部和偏移左侧) 例如:            $(window).resize(function () { var p = $("#divfromwhichyouwantalignment"); var offset = p.offset(); $(".element1toalign").offset({ left: offset.left }); $(".element2toalign").offset({ left: offset.top + 350 }); });