CSS 布局 : screen resolution problem

Question

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

1. 如果我针对高分辨率(1280 像素宽)进行设计，在低分辨率显示器上会出现很长的水平滚动条

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

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

Answer 1

有几个建议...

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

2. 使用 100% 水平填充的设计，并根据百分比宽度进行放置。根据您的设计，这可能会很困难，但如果您使用 #1 中的一些固定宽度方面，这可能会有所帮助。

3. 使用条件 CSS 加载。仅当您确实需要针对不同屏幕尺寸(如移动网站)的非常不同的布局时才推荐此方法。您可以使用 Javascript 获取 document.body.clientWidth 和 document.body.clientHeight 以获取当前窗口大小并加载基于此的内容。不过请记住……用户可以调整屏幕大小，因此它不会像 #1 或 #2 那样大。