屏幕分辨率& 网页有问题？

发布于 2024-07-29 01:35:42 字数 433 浏览 6 评论 0原文

当我将屏幕分辨率更改为 800x600、640x480 等时，我的网页的一半被切断，包括图像，我什至根本无法使用滚动条来查看页面的其余部分，我正在使用百分比以及使用 CSS 的像素。需要帮助修复吗？所有浏览器都会受到影响。这是一个示例。

#top {
    background: #424ee0;
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow: hidden;
}

#center-top {
    margin: 0px;
    padding: 5px 0px 5px 0px;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    color: orange;
}

原文

When I change my screen resolution to 800x600, 640x480 and so on half my web page gets cut off including images I cant even use the scroll bar at all to see the rest of the page, I'm using percentages as well as pixels using CSS. Need help fixing? All browsers are affected. Here is a sample.

#top {
    background: #424ee0;
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow: hidden;
}

#center-top {
    margin: 0px;
    padding: 5px 0px 5px 0px;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    color: orange;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何其悲哀 2024-08-05 01:35:42

您有：

 overflow: hidden;

在顶部指定。顶部还有：

 width: 100%.

这意味着它被设置为容器的 100%。如果 center-top 包含在 top 中，那么它的宽度可能会超过容器（顶部）的 100%。 Overflow:hidden 然后覆盖滚动条并隐藏所有溢出。

如果您希望它可见：

删除“overflow：hidden”。
将其更改为“溢出：自动”。

其他：

您明确将宽度设置为 1200px。这意味着水平分辨率小于 1200 像素的任何人都会看到滚动条。这真的是你想要的吗？考虑选择较小的宽度。

You have:

 overflow: hidden;

Specified in top. Top also has:

 width: 100%.

This means that it's set to 100% of the container. If center-top is contained by top, then its width is likely way more than 100% of the container (top). Overflow:hidden then overrides to scrollbar and hides all overflow.

If you want it to be visible either:

remove "overflow: hidden".
change it to "overflow: auto".

Something else:

You're explicitly setting width to 1200px. This means that anyone who has a horizontal resolution of less than 1200px, they will see scrollbars. Is that really what you want? Consider choosing a smaller width.

回复收藏 0 原文

陌伤浅笑 2024-08-05 01:35:42

在尝试修复网页之前，请查看

屏幕分辨率统计数据

Michael Bloch 在 Web 开发中发布的（2007 年 9 月 23 日星期日）
http://www.tamingthebeast.net/blog/ web-development/screen-resolution-statistics-0907.htm

1 - 44.55% - 1024×768
2 - 13.98% - 1280×1024
3 - 12.43% - 1280×800
4 -  7.31% - 800×600
5 -  4.76% - 1440×900
6 -  3.47% - 1152×864
7 -  2.71% - 1680×1050
8 -  1.72% - 1280×768
9 -  0.97% - 1920×1200
10 - 0.81% - 1280×960

请注意，只有 7% 的互联网用户使用 800 x 600，而 640 x 480 甚至没有出现在列表中。那是在 2007 年。作者指出，当时 800 x 600 的受欢迎程度正在迅速下降。

下面的图表更清楚地显示了趋势：

Date         Higher 1024x768 800x600 640x480 Unknown 
January 2009   57%    36%       4%      0%      3% 
January 2008   38%    48%       8%      0%      6% 
January 2007   26%    54%      14%      0%      6% 
January 2006   17%    57%      20%      0%      6% 
January 2005   12%    53%      30%      0%      5% 
January 2004   10%    47%      37%      1%      5% 
January 2003    6%    40%      47%      2%      5% 
January 2002    6%    34%      52%      3%      5% 
January 2001    5%    29%      55%      6%      5% 
January 2000    4%    25%      56%     11%      4%

http://www.w3schools.com/browsers/ browsers_display.asp

Before you try to fix your web page, have a look at these

Screen resolution statistics

Posted by Michael Bloch in web development (Sunday September 23, 2007 )
http://www.tamingthebeast.net/blog/web-development/screen-resolution-statistics-0907.htm

1 - 44.55% - 1024×768
2 - 13.98% - 1280×1024
3 - 12.43% - 1280×800
4 -  7.31% - 800×600
5 -  4.76% - 1440×900
6 -  3.47% - 1152×864
7 -  2.71% - 1680×1050
8 -  1.72% - 1280×768
9 -  0.97% - 1920×1200
10 - 0.81% - 1280×960

Note that 800 x 600 is only used by 7% of internet users and 640 x 480 didn't even make the list. That was in 2007. The author noted that 800 x 600 was rapidly dropping in popularity at that time.

Here's a chart that more clearly shows the trends:

Date         Higher 1024x768 800x600 640x480 Unknown 
January 2009   57%    36%       4%      0%      3% 
January 2008   38%    48%       8%      0%      6% 
January 2007   26%    54%      14%      0%      6% 
January 2006   17%    57%      20%      0%      6% 
January 2005   12%    53%      30%      0%      5% 
January 2004   10%    47%      37%      1%      5% 
January 2003    6%    40%      47%      2%      5% 
January 2002    6%    34%      52%      3%      5% 
January 2001    5%    29%      55%      6%      5% 
January 2000    4%    25%      56%     11%      4%

http://www.w3schools.com/browsers/browsers_display.asp

回复收藏 0 原文

~没有更多了~