Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
387 views
in Technique[技术] by (71.8m points)

css - 为什么em而不是px?(Why em instead of px?)

I heard you should define sizes and distances in your stylesheet with em instead of in pixels.

(我听说你应该使用em而不是像素来定义样式表中的大小和距离。)

So the question is why should I use em instead of px when defining styles in css?

(所以问题是为什么在css中定义样式时我应该使用em而不是px?)

Is there a good example that illustrates this?

(有一个很好的例子可以说明这一点吗?)

  ask by Spoike translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It is wrong to say that one is a better choice than the other (or both wouldn't have been given their own purpose in the spec).

(说一个是比另一个更好的选择是错误的(或两者都不会在规范中给出自己的目的)。)

It may even be worth noting that StackOverflow makes extensive use of px units.

(甚至值得注意的是StackOverflow广泛使用px单元。)

It is not the poor choice Spoike was told it was.

(Spoike被告知这不是一个糟糕的选择。)

Definition of units

(单位的定义)

  • px is an absolute unit of measurement (like in , pt , or cm ) that also happens to be 1/96 of an in unit (more on why later).

    (px为测量的绝对单位(如 ,Pt厘米 ),其也恰好是一个1/96 单元(更为什么更高版本)。)

    Because it is an absolute measurement, it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.

    (因为它是绝对测量,所以可以在任何时候使用它来定义特定大小的东西,而不是与浏览器窗口的大小或字体大小等其他东西成比例。)

    Like all the other absolute units, px units don't scale according to the width of the browser window.

    (与所有其他绝对单位一样, px单位不会根据浏览器窗口的宽度进行缩放。)

    Thus, if your entire page design uses absolute units such as px rather than % , it won't adapt to the width of the browser.

    (因此,如果整个页面设计使用绝对单位(如px而不是%) ,则它将无法适应浏览器的宽度。)

    This is not inherently good or bad, just a choice that the designer needs to make between adhering to an exact size and being inflexible versus stretching but in the process not adhering to an exact size.

    (这本身并不是好的或坏的,只是设计师在坚持精确尺寸和不灵活与拉伸之间需要做出的选择,但在此过程中不遵守确切的尺寸。)

    It would be typical for a site to have a mix of fixed-size and flexible-sized objects.

    (对于站点来说,通常会混合使用固定大小和灵活大小的对象。)

    Fixed size elements often need to be incorporated into the page - such as advertising banners, logos or icons.

    (固定大小的元素通常需要合并到页面中 - 例如广告横幅,徽标或图标。)

    This ensures you almost always need at least some px-based measurements in a design.

    (这可确保您在设计中几乎总是需要至少一些基于px的测量。)

    Images, for example, will (by default) be scaled such that each pixel is 1*px* in size, so if you are designing around an image you'll need px units.

    (例如,图像将(默认情况下)缩放,使得每个像素的大小为1 * px *,因此如果您围绕图像进行设计,则需要px单位。)

    It is also very useful for precise font sizing, and for border widths, where due to rounding it makes the most sense to use px units for the majority of screens.

    (它对于精确的字体大小调整以及边框宽度也非常有用,由于四舍五入,因此对大多数屏幕使用px单位最有意义。)

    All absolute measurements are rigidly related to each other;

    (所有绝对测量值都是严格相关的;)

    that is, 1in is always 96px , just as 1in is always 72pt .

    (也就是说, 1in 总是 96px ,就像1in 总是 72pt一样 。)

    (Note that 1in is almost never actually a physical inch when talking about screen-based media).

    ((请注意,在谈论基于屏幕的媒体时, 1in几乎从不实际上是物理英寸 )。)

    All absolute measurements assume a nominal screen resolution of 96ppi and a nominal viewing distance of a desktop monitor, and on such a screen one px will be equal to one physical pixel on the screen and one in will be equal to 96 physical pixels.

    (所有绝对测量假定96ppi和桌面显示器的标称观看距离的标称屏幕分辨率,并且这样的屏幕上的一个像素将等于一个将等于96个物理像素的屏幕上的一个物理像素和。)

    On screens that differ significantly in either pixel density or viewing distance, or if the user has zoomed the page using the browser's zoom function, px will no longer necessarily relate to physical pixels.

    (在像素密度或观看距离上显着不同的屏幕上,或者如果用户使用浏览器的缩放功能缩放了页面,则px将不再与物理像素相关。)

  • em is not an absolute unit - it is a unit that is relative to the currently chosen font size.

    (em不是绝对单位 - 它是相对于当前选择的字体大小的单位。)

    Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt ), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

    (除非您通过使用绝对单位(例如pxpt )设置字体大小来覆盖字体样式,否则这将受到用户浏览器或操作系统中字体选择的影响(如果它们已经制作了字体样式),因此它没有意义使用em作为长度的一般单位,除非您特别希望它按字体大小比例缩放。)

    Use em when you specifically want the size of something to depend on the current font size.

    (当您特别希望某些内容的大小取决于当前字体大小时,请使用em 。)

  • % is also a relative unit, in this case, relative to either the height or width of a parent element.

    (也是相对单位,在这种情况下,相对于父元素的高度或宽度。)

    They are a good alternative to px units for things like the total width of a design if your design does not rely on specific pixel sizes to set its size.

    (如果您的设计不依赖于特定的像素大小来设置其大小,它们是px单元的良好替代品,例如设计的总宽度。)

    Using % units in your design allows your design to adapt to the width of the screen/device, whereas using an absolute unit such as px does not.

    (在设计中使用单位可以使您的设计适应屏幕/设备的宽度,而使用绝对单位(如px)则不然。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...