css - 为什么超过 96 的 dpi 设置会搞砸我的网站？

Question

我注意到，当 dpi 设置为高于 96 到喜欢 120 时，我的网站在使用 Firefox 或 IE7 时会变得混乱。CSS基本上打破了。有人知道怎么修这个东西吗？

链接到网站

谢谢

Answer 1

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

你应该做什么：

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

Answer 2

如果用户调整了他们的 Windows DPI 设置，没有真正的修复可以防止任何事情发生。将 Windows 更改为“大字体”模式，或将其设置为默认值以外的 DPI 设置，会影响 IE 中的所有布局。

但是，这绝不应该导致网站大规模中断。可能由于值的四舍五入，一些事情会稍微错位。

当字体大小更改时，您所指向的站点确实会严重损坏 - 例如，更改浏览器中的默认字体（或将 Firefox 设置为“仅缩放文本”）。按钮中的文本完全离开按钮并开始悬停在其他地方。

看起来，至少对于顶部的按钮来说，造成这种情况的主要原因是整行按钮是单个背景图像，其中的文本是浮动元素，仅在给定的字体大小下才与背景图像匹配- 对它们的大小和位置进行任何调整，它们都会与背景不符。

设计时，始终更改缩放设置（在 IE7 和 Firefox 中）和字体大小（例如在 Firefox 中使用“仅缩放文本”），并确保那些确实改变大小的东西不会破坏网站。在某些情况下，“pt”中指定的内容会缩放，而“px”中指定的内容不会。

你怎么能解决它

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

我会做什么

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