我应该使用em还是px?

10

我正在开始一个新的网络项目,想知道在布局和字体大小上应该使用 em 还是 px。

尽管大多数浏览器现在支持文本和图像缩放,无论字体是以 px 还是 em 定义的,但社区对于使用 em 仍然十分支持。

但是我认为使用 em 存在两个问题。

首先是在大型宽屏幕上的问题——经常导致文本横跨整个屏幕,阅读页面时非常困难。

其次,如果你的网站需要集成 Flash 组件怎么办?如果您希望 Flash 组件恰好适合 em 定义的 div(例如站点的主容器),那么该怎么做呢?因为 Flash 组件以 px 为度量单位。

真的有充分的理由在 EM 上使用 PX 吗?


可能是为什么使用em而不是px?的重复问题。 - Mario S
4个回答

23
首先,大屏幕通常会导致文本在屏幕上横向延伸很长,这很难阅读。

使用empx,您仍然可以为您的布局定义 width (或 max-width )。

其次,如果您的网站需要集成Flash组件,则如何处理?如果您希望Flash组件完全适合以 em 定义的div内部(例如,该网站的主容器),那么该怎么办,因为Flash组件是以px为单位测量的?
要使其完全适合,您仍然可以使用100% width ,或者我可能没有理解您的意思。
理论上,使用 em 而不是 px 将允许您的布局根据用户首选项轻松调整大小。
但是今天,现代浏览器可以调整 px 布局和 em 布局的大小,因此它可能与几年前相比不那么相关。

1
好的回答,我觉得我自己也无法更好地解释它。 - Philip Morton
关于 Flash 组件的尺寸,他可能指的是容器的尺寸,因为某些 Flash 元素可能无法很好地缩放。 - JGarrido

2

如果您使用相对大小的字体而不是固定大小的字体,则主要优点在于(视力受损的)访问者可以缩放网页,包括字体。这一切都关乎网络无障碍性


3
现在这不再是一个很大的问题。所有主要的浏览器,包括 Internet Explorer,都可以缩放整个页面,包括字体。 - Turnor
5
对于大多数浏览器来说,情况已经不再是这样了。我只是不确定是否值得花费精力迎合剩下的IE6用户。 - helloworlder
我一直想知道,如果我在基于像素的边缘上使用 cmd + 鼠标滚轮向上缩放,会是什么类型的缩放,它可以完美地进行缩放。在 Firefox 中。 - antpaw
3
新一代的浏览器支持对固定字体进行缩放是事实,但您不希望完全依赖于浏览器是否能正常工作。 - BalusC

2

像em一样,px在不同的显示器尺寸上也存在同样的问题。使用px时,更容易以屏幕上的像素大小来思考(即像素具有特定的点距)。由于ems(和%)与显示器没有固定的大小关系,人们不会陷入同样的陷阱。(像所有图像像素一样,px实际上并没有固定的1:1与显示像素的关系,但人们通常会这样想。)

当涉及到对齐替换元素时,无论是Flash还是图像,px确实更合适(虽然使用纯矢量图形的Flash将使用任何你想要的单位按比例缩放到任何大小)。个人而言,我使用最适合确定定位和大小的元素类型的单位:像素用于图像和电影,em用于文本,%用于视口。


1

现在,随着现代桌面浏览器对pxem进行相同比例缩放,我认为讨论应该转移到如何在iPad、iPhone等移动设备上使用其中之一将显示的问题上。


像素是相对于设备的。在大多数桌面浏览器上,比例为1:1。在一些移动设备上,比例为1.5:1。 - webinista

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接