我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是,在CSS中定义样式时,为什么要使用em而不是px?有没有一个很好的例子可以说明这一点?
当前回答
它适用于根据字体大小进行缩放的所有内容。
它在通过缩放字体大小实现缩放的浏览器上特别有用。因此,如果使用em调整所有元素的大小,它们会相应地缩放。
其他回答
例子:
代码:body{font-size:10px;}//保持10以下所有大小正确,更改此值,其余更改为该值的1.4
1{font-size:1.2em;}//12px
2{font-size:1.4em;}//14px
3{font-size:1.6em;}//16px
4{font-size:1.8em;}//18px
5{字体大小:2em;}//20px
…
body
1
2
3
4
5
通过改变身体中的值,其余部分会自动改变为基础值的一倍…
10×2=2010×1.6=16等
你可以将基值设为8px…所以8×2=168×1.6=12.8//可由浏览器舍入
使用px精确放置图形元素。使用em进行测量,必须在文本元素周围进行定位和间隔,如行高等。px是像素精度的,em可以随使用的字体动态变化
我有一台高分辨率的小型笔记本电脑,必须以120%的文本放大率运行Firefox,才能不斜视地阅读。
许多网站都有这样的问题。布局变成乱码,按钮中的文本被切成两半或完全消失。就连stackoverflow.com也深受其苦:
注意顶部按钮和页面选项卡如何重叠。如果他们使用em单位而不是px,就不会有问题。
托马斯鲁特(thomas rutter)的最高分答案是正确的,但关于像素的大小是非常错误的。所以,即使它很旧,我也不能让它被破坏。
电脑屏幕通常不是96dpi!(或者ppi,如果你想迂腐的话。)
像素没有固定的物理大小。(是的,它只固定在一个屏幕上,但在下一个屏幕中,像素很可能更大或更小,当然不是1/96英寸。)证据画一条960像素长的线。用物理尺测量。是10英寸吗?不将你的笔记本电脑连接到电视上。现在线路是10英寸吗?还是没有?在iPhone上显示该行。还是一样大小?为什么不呢?
谁发明了96dpi电脑屏幕神话?(有些宗教使用72dpi的神话。但同样错误。)
它适用于根据字体大小进行缩放的所有内容。
它在通过缩放字体大小实现缩放的浏览器上特别有用。因此,如果使用em调整所有元素的大小,它们会相应地缩放。