屏幕分辨率不适用于我的 CSS答案

【问题标题】：Screen resolution does not work correctly with my CSS屏幕分辨率不适用于我的 CSS
【发布时间】：2011-07-20 02:13:33
【问题描述】：

我正在使用以下 CSS 制作网站。每次我更改计算机上的分辨率时，#info div 下的文本都会被弄乱。我该如何解决？谢谢。

#container {
background-image:url('pic.png');
height: 541px;
width: 1020px;
margin: 0 auto;
}

#musicplayer {
margin-top:90px;
display:inline;
}

#info {
position: absolute;
top: 29em;
left: 38em;
}

【问题讨论】：

我不会使用 javascript 来亲自调整 div 的大小，因为这会在 javascript 被关闭的情况下破坏网站（你希望它优雅地降级）。但是，我不确定我是否完全理解您的问题。您说 info div 下的文本被破坏了，您是指 div 中的文本还是它下面的所有内容？在 div 被破坏的情况下，不要使用 ems - 使用像素测量或百分比。屏幕的分辨率不应该影响您页面的布局 - 如果您的网站是 1024 像素宽，那么无论屏幕的分辨率如何，它都会一直如此。
当我说文本被管理时，我的意思是它在我的正常分辨率下看起来很棒，但是当我降低分辨率时，它的格式会像一行上的 2 个单词，然后是下面的一行......想象一下它像这样。你好世界
我的名字
是鲍勃
很高兴
见到你

标签： css

【解决方案1】：

如果您可以使用 javascript，请使用 jquery 之类的东西并重新计算您的长度。有一个stackoverflow条目：

jQuery Screen Resolution Height Adjustment

如果你不能使用 javascript，我想使用百分比来设置顶部和左侧是一个简单的解决方法：

http://www.w3schools.com/cssref/pr_pos_top.asp

这段 javascript 还向您展示了如何更改字体大小：

http://www.shopdev.co.uk/blog/text-resizing-with-jquery/

因为我会说这与问题有关。

【讨论】：

简单地使用 css 是否可以保持一致性？
@fealiux-olio：是的，使用百分比来指定高度、宽度。例如：#info { 宽度 : 15%;高度：20%； }