超过96的dpi设置搞砸了我的网站

时间:2009-02-28 11:41:35

标签: css dpi

我注意到当dpi设置为高于96时,我认为120我的网站使用firefox或ie7搞砸了。 css基本上打破了。有人知道解决这个问题吗?

感谢

ps网站

http://www.iaddesignandstudio.com

日Thnx

2 个答案:

答案 0 :(得分:5)

该网站使用固定大小的布局,但混合了单位pxpt。更改屏幕的dpi时,这些单位的相对大小会发生变化,即网站会被设计破坏。

你应该做什么:

  • 不要将pt用于屏幕布局 - pt仅用于打印
  • 阅读液体布局和相对单位em

答案 1 :(得分:1)

如果用户调整了他们的Windows DPI设置,那么就没有一个可以阻止发生任何事情的修复程序。将Windows更改为“大字体”模式,或将其设置为默认设置以外的DPI设置,会影响IE中的所有布局。

然而,这绝不会导致网站大规模破坏。可能由于价值的四舍五入,有些事情可能会略微错位。

当您更改字体大小时,您指向的网站确实会大幅破坏 - 例如,更改浏览器中的默认字体(或将Firefox设置为“仅缩放文本”)。按钮上的文字完全离开按钮并开始在其他地方停留。

看起来这个的主要原因,至少对于顶部的按钮,整个按钮行是单个背景图像,其中的文本是浮动元素,只与背景图像匹配给定字体大小 - 对它们的大小和位置进行任何调整,它们的背景都会变得严重。

设计时,请始终更改缩放设置(在IE7和Firefox中)和字体大小(例如在Firefox中使用“仅缩放文本”)并确保那些尺寸发生变化的内容不会破坏网站。在某些情况下,“pt”中指定的内容会缩放,而“px”中指定的内容则不会。

如何解决问题

很明显,您已将所有内容设计为特定大小(以像素为单位),包括标题和所有按钮/标签。如果要这样做,请将标题DIV声明为position:relative,并使用像素值(相对于包含div)将H1,H2和UL绝对定位在其中。从DIV中删除边距,填充等以简化。使用像素指定LI元素的宽度,高度和顶部边距。

我会做什么

通常情况下,我会建立这样的东西是灵活的,所以如果由于某种原因,一个人在他们的浏览器上启用了非常大的字体,它会很好地处理它。对于您的背景图像,这实际上是不可能的,因为它们仅针对一个给定大小进行构建。所以我在标题上有一个可重复的背景,我会分别为每个按钮做每个背景。显然,这将是更多的工作。