我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是,在CSS中定义样式时,为什么要使用em而不是px?有没有一个很好的例子可以说明这一点?
当前回答
它适用于根据字体大小进行缩放的所有内容。
它在通过缩放字体大小实现缩放的浏览器上特别有用。因此,如果使用em调整所有元素的大小,它们会相应地缩放。
其他回答
因为他们(http://en.wikipedia.org/wiki/Em_(排版))与当前使用的字体大小成正比。如果字体大小是16点,那么一个em就是16点。如果字体大小为16像素(注意:与点不同),则一个em为16像素。
这导致了两件(相关的)事情:
如果你以后选择在CSS中编辑字体大小,保持比例很容易。许多浏览器支持自定义字体大小,覆盖CSS。如果您以像素为单位设计所有内容,那么在这些情况下,您的布局可能会中断。但是,如果你使用ems,这些过度使用应该可以缓解这些问题。
我有一台高分辨率的小型笔记本电脑,必须以120%的文本放大率运行Firefox,才能不斜视地阅读。
许多网站都有这样的问题。布局变成乱码,按钮中的文本被切成两半或完全消失。就连stackoverflow.com也深受其苦:
注意顶部按钮和页面选项卡如何重叠。如果他们使用em单位而不是px,就不会有问题。
托马斯鲁特(thomas rutter)的最高分答案是正确的,但关于像素的大小是非常错误的。所以,即使它很旧,我也不能让它被破坏。
电脑屏幕通常不是96dpi!(或者ppi,如果你想迂腐的话。)
像素没有固定的物理大小。(是的,它只固定在一个屏幕上,但在下一个屏幕中,像素很可能更大或更小,当然不是1/96英寸。)证据画一条960像素长的线。用物理尺测量。是10英寸吗?不将你的笔记本电脑连接到电视上。现在线路是10英寸吗?还是没有?在iPhone上显示该行。还是一样大小?为什么不呢?
谁发明了96dpi电脑屏幕神话?(有些宗教使用72dpi的神话。但同样错误。)
普遍的共识是使用百分比来调整字体大小,因为它在浏览器/平台之间更加一致。
有趣的是,我以前总是使用pt来调整字体大小,我假设所有网站都使用pt。你通常不会在其他应用程序(如Word)中使用像素大小。我想这是因为它们是用于打印的-但在web浏览器中的大小与Word中的大小相同。。。
使用em或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小。如果您使用以px指定的字体进行设计,则如果用户选择文本大小更大,字体大小不会改变(在IE 6和其他浏览器中)。这对于有视觉障碍的用户来说非常糟糕。
有关此类设计的几个例子和文章(有无数可供选择),请参阅最新一期的“a List Apart:Fluid Grids”,旧一期的文章“How to Size Text in CSS”或Dan Cederholm的防弹Web Design。
您的图像仍然应该以像素大小显示,但通常情况下,用像素大小显示文本被认为是不好的形式。
尽管我个人很鄙视IE6,但它目前是《财富》200强公司中唯一一款被大多数用户认可的浏览器。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素,从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景