使用em而不是pt

Question

我正在阅读Web Content Accessibility Guidelines 1.0（第3.4页，第13页），它说使用em而不是pt。

我的问题是，您为网站开发的图像是按像素完成的。因此，如果您使用相对大小调整，浏览器将必须缩放它们。有没有什么好的技术可以确保图片不会太扭曲（即比特变得太模糊等）？或者，如果您选择不缩放图像，是否有任何技术可以确保布局不会被破坏？

Answer 1

检查此sizing study的底部，以便比较px到em尺寸调整技术，因为图像变大/渲染的百分比更低。

在标题为“信息”的部分下，有even more可供查看。

看起来你只需要继续使用小数点后面的数字，让那些F5肌肉伸展和柔软。 ;)

Answer 2

我建议您阅读Ethan Marcotte撰写的Responsive Web Design。他谈到了一种不在img标签上指定任何高度/宽度的技巧，而是将max-width设置为100％：

img {
   max-width: 100%;
}

事实上，这适用于任何固定宽度的元素，如视频/ flash等

IE6及更低版本不能正确支持最大宽度，因此您可以设置width: 100%;，这是一种基本的解决方法。

本书还介绍了如何使用AlphaImageLoader改进IE7及以下版本的图像缩放。

Answer 3

在em中指定图像尺寸通常没有意义。它不会改善任何东西，只会使图像模糊。仅将em用于文本，并将图片保留为原始大小。此外，如果不希望图像在狭窄的浏览器窗口大小上溢出容器，则可以使用IMG {max-width: 100%}。