왜 px 대신 em?

왜 px 대신 em?

---

스타일 시트에서 픽셀 대신 em으로 크기와 거리를 정의해야한다고 들었습니다. 그래서 질문은 CSS에서 스타일을 정의 할 때 px 대신 em을 사용해야하는 이유입니다. 이것을 보여주는 좋은 예가 있습니까?

---

하나가 다른 것보다 더 나은 선택이라고 말하는 것은 잘못된 것입니다 (또는 둘 다 사양에서 자신의 목적이 주어지지 않았을 것입니다). StackOverflow가 px 단위를 광범위하게 사용한다는 점은 주목할 가치가 있습니다. Spoike가 그렇게 말한 것은 가난한 선택이 아닙니다.

단위의 정의

• px 는 절대 측정 단위 (예 : in , pt 또는 cm )이며 in 단위의 1/96이기도합니다 (나중에 자세히 설명). 절대 측정이기 때문에 브라우저 창의 크기 나 글꼴 크기와 같은 다른 것에 비례하지 않고 특정 크기로 정의하려는 경우 언제든지 사용할 수 있습니다.

  다른 모든 절대 단위와 마찬가지로 px 단위는 브라우저 창의 너비에 따라 크기가 조정되지 않습니다. 따라서 전체 페이지 디자인 이 % 대신 px 와 같은 절대 단위를 사용 하는 경우 브라우저 너비에 맞게 조정되지 않습니다. 이것은 본질적으로 좋거나 나쁘지 않으며, 디자이너가 정확한 크기를 고수하는 것과 유연하지 않은지, 늘이는 것 사이에서 선택해야하지만 정확한 크기를 고수하지 않는 과정에서 선택해야합니다. 사이트에는 고정 크기와 유연한 크기의 개체가 혼합되어있는 것이 일반적입니다.

  광고 배너, 로고 또는 아이콘과 같은 고정 크기 요소를 페이지에 통합해야하는 경우가 많습니다. 이 보장하지만 당신은 거의 항상 적어도 필요한 일부 디자인에서 픽셀 기반의 측정을. 예를 들어 이미지는 (기본적으로) 각 픽셀의 크기가 1 * px *가되도록 크기가 조정되므로 이미지 주위를 디자인하는 경우 px 단위 가 필요합니다 . 또한 정확한 글꼴 크기와 테두리 너비에 매우 유용합니다. 반올림으로 인해 대부분의 화면에 px 단위 를 사용하는 것이 가장 좋습니다 .

  모든 절대 측정은 서로 밀접하게 관련되어 있습니다. 즉, 1 인치는 것입니다 항상 96px 것처럼, 1 인치는 것입니다 항상 72pt . ( 화면 기반 미디어에 대해 말할 때 1in 은 실제로 물리적 인치 가 거의 없음을 참고하십시오 ). 모든 측정은 절대 96ppi 공칭 화면 해상도와 데스크탑 모니터 공칭 시거리를 가정하고, 이러한 스크린 상에 하나의 픽셀은 하나 개 동일 할 것이다 실제 화면의 화소 하나 의96 물리적 픽셀과 같습니다. 픽셀 밀도 나 시청 거리가 크게 다른 화면에서 또는 사용자가 브라우저의 확대 / 축소 기능을 사용하여 페이지를 확대 한 경우 px 는 더 이상 실제 픽셀과 관련되지 않습니다.

• em 은 절대 단위가 아닙니다. 현재 선택된 글꼴 크기에 상대적인 단위입니다. 절대 단위 (예 : px 또는 pt ) 로 글꼴 크기를 설정하여 글꼴 스타일을 재정의하지 않은 경우 사용자의 브라우저 또는 OS에서 글꼴을 선택하면 영향을 받게되므로 의미가 없습니다. em을 일반 길이 단위로 사용하려면 글꼴 크기가 조정될 때 특별히 크기를 조정하려는 경우를 제외합니다.

  특정 크기가 현재 글꼴 크기에 따라 달라지기를 원할 때 em을 사용하십시오 .

• % 는 또한이 경우 상위 요소의 높이 또는 너비에 상대적인 상대 단위입니다. 디자인이 크기를 설정하기 위해 특정 픽셀 크기에 의존하지 않는 경우 디자인의 총 너비와 같은 경우 픽셀 단위에 대한 좋은 대안 입니다.

  디자인에서 % 단위를 사용하면 디자인이 화면 / 장치의 너비에 적응할 수 있지만 px 와 같은 절대 단위를 사용하면 그렇지 않습니다.

---

나는 고해상도의 작은 노트북을 가지고 있고, 눈을 가늘게 뜨지 않고 읽을 수 있도록 120 % 텍스트 줌으로 Firefox를 실행해야합니다.

많은 사이트에서 이에 문제가 있습니다. 레이아웃이 모두 왜곡되고 버튼의 텍스트가 반으로 잘 리거나 완전히 사라집니다. stackoverflow.com조차도 고통을 겪습니다.

상단 버튼과 페이지 탭이 어떻게 겹치는 지 확인합니다. px 대신 em 단위를 사용했다면 문제가 없었을 것입니다.

---

제가이 질문을 한 이유는 제가 CSS에서 즐겁게 해킹을하고 있었기 때문에 em의 사용법을 잊어 버렸기 때문입니다. 사람들은 내가 글꼴 크기 조정에 대해 이야기하지 않았기 때문에 내가 일반적인 질문을 유지한다는 것을 알아 차리지 못했습니다. 페이지의 특정 블록 요소 에 스타일을 정의하는 방법에 더 관심이있었습니다 .

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

---

The top voted answer here from thomasrutter is right in his response about the em. But is very very wrong about the size of a pixel. So even though it is old, I cannot let it be undebated.

A computer screen is normally NOT 96dpi! (Or ppi, if you want to be pedantic.)

A pixel does NOT have a fixed physical size.
(Yes, it is fixed within one screen only, but in the next screen a pixel is most likely bigger, or smaller, and certainly NOT 1/96 of an inch.)


Proof
Draw a line, 960 pixels long. Measure it with a physical ruler. Is it 10 inches? No..?
Connect your laptop to your TV. Is the line 10 inches now? Still not?
Show the line on your iPhone. Still same size? Why not?

Who the heck invented the 96dpi computer screen myth?
(Some religions operate with a 72dpi myth. But equally wrong.)

---

It's of use for everything that has to scale according to the font size.

It's especially useful on browsers which implement zoom by scaling the font size. So if you size all your elements using em they scale accordingly.

---

Because the em (http://en.wikipedia.org/wiki/Em_(typography)) is directly proportional to the font size currently in use. If the font size is, say, 16 points, one em is 16 points. If your font size is 16 pixels (note: not the same as points), one em is 16 pixels.

This leads to two (related) things:

1. it's easy to keep proportions, if you choose to edit your font sizes in your CSS later on.
2. Many browsers support custom font sizes, overriding your CSS. If you design everything in pixels, your layout might break in these cases. But, if you use ems, these overridings should mitigate these problems.

---

example:

Code: body{font-size:10px;} //keep at 10 all sizes below correct, change this value and the rest change to be e.g. 1.4 of this value

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{font-size:2em;} //20px

…

body

1

2

3

4

5

by changing the value in body the rest change automatically to be a kind of times the base value…

10×2=20 10×1.6=16 etc

you could have the base value as 8px… so 8×2=16 8×1.6=12.8 //may be rounded by browser

---

A very practical reason is that IE 6 doesn't let you resize the font if it's specified using px, whereas it does if you use a relative unit such as em or percentages. Not allowing the user to resize the font is very bad for accessibility. Although it's in decline, there are still a lot of IE 6 users out there.

---

use px for precise placement of graphical elements. use em for measurements having to do positioning and spacing around text elements like line-height etc. px is pixel accurate, em can change dynamically with the font in use

---

The main reason for using em or percentages is to allow the user to change the text size without breaking the design. If you design with fonts specified in px, they do not change size (in IE 6 and others) if the user chooses text size - larger. This is very bad for users with visual handicaps.

For several examples of and articles on designs like this (there are a myriad to choose from), see the latest issue of A List Apart: Fluid Grids, the older article How to Size Text in CSS or Dan Cederholm's Bulletproof Web Design.

Your images should still be displayed with px sizes, but, in general, it is not considered good form to size your text with px.

As much as I personally despise IE6, it is currently the only browser approved for the bulk of the users in our Fortune 200 company.

---

There is a simple solution if you want to use px to specify font size, but still want the usability that em's provide by placing this in your CSS file:

body {
  font-size: 62.5%;
}

Now specify you p (and other) tags like this:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

And so on.

---

You probably want to use em for font sizes until IE6 is gone (from your site). Px will be alright when page zooming (as opposed to text zooming) becomes the standard behaviour.

Traingamer already provided the neccessary links.

---

The general consensus is to use percentages for font sizing, because it's more consistent across browsers/platforms.

하지만 재미 있습니다. 저는 항상 글꼴 크기 조정에 pt를 사용했고 모든 사이트에서이를 사용한다고 가정했습니다. 일반적으로 다른 앱 (예 : Word)에서는 px 크기를 사용하지 않습니다. 나는 그들이 인쇄용이기 때문이라고 생각합니다. 그러나 크기는 웹 브라우저에서 Word와 동일합니다.

참고 URL : https://stackoverflow.com/questions/609517/why-em-instead-of-px