왜 그들은 px대신에?

왜 그들은 px대신에?

를 당의신스크거기정한들었다다니습으로 정의해야 .em픽셀 단위가 아닌그래서 문제는 내가 왜 사용해야 하느냐는 것입니다.em에 pxCSS에서 스타일을 정의할 때?이것을 설명할 수 있는 좋은 예가 있습니까?

둘 중 하나가 다른 하나보다 더 나은 선택이라고 말하는 것은 잘못된 것입니다(또는 둘 다 규격에서 고유한 목적이 주어지지 않았을 것입니다).스택 오버플로는 px 단위를 광범위하게 사용한다는 점에 유의할 필요가 있습니다.그 질문이 시사하는 것은 잘못된 선택이 아닙니다.

단위의 정의

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

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

  고정 크기 요소(예: 광고 배너, 로고 또는 아이콘)를 페이지에 통합해야 하는 경우가 많습니다.이를 통해 설계에는 거의 항상 최소한 일부 px 기반 측정값이 필요합니다.예를 들어 이미지는 각 픽셀의 크기가 1px가 되도록 (기본적으로) 조정되므로 이미지를 중심으로 설계할 경우 px 단위가 필요합니다.또한 정밀한 글꼴 크기 조정 및 테두리 너비에 매우 유용하며 반올림으로 인해 대부분의 화면에 대해 px 단위를 사용하는 것이 가장 적합합니다.

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

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

  현재 글꼴 크기에 따라 다른 크기를 지정할 때 사용합니다.

• rem은 em과 비슷하지만 현재 요소에 지정된 글꼴 크기보다는 문서의 기본 글꼴 크기(특히 루트 요소의)에 상대적입니다.

• 또한 이 경우 부모 요소의 높이 또는 폭에 대한 상대적인 단위입니다.설계가 특정 픽셀 크기에 의존하여 크기를 설정하지 않는 경우 설계의 전체 너비와 같은 것에 대해 px 단위를 대체하는 좋은 방법입니다.

  설계에 % 단위를 사용하면 화면/장치의 너비에 맞게 설계를 조정할 수 있지만 px와 같은 절대 단위를 사용하면 조정할 수 없습니다.

• vh, vw, vmin 및 vmax는 %와 같은 상대적 단위이지만 상위 요소가 아닌 뷰포트 크기(창에서 볼 수 있는 영역 크기)에 상대적입니다.각각 뷰포트의 높이, 너비, 둘 중 더 작은 것, 둘 중 더 큰 것에 상대적입니다.

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

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

맨 위 단추와 페이지 탭이 겹치는 방식을 확인합니다.만약 그들이 px 대신 em 단위를 사용했다면 문제가 없었을 것입니다.

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

Henrik Paul과 다른 사람들이 지적했듯이 em은 요소에 사용되는 글꼴 크기에 비례합니다.px에서 블록 요소의 크기를 정의하는 것이 일반적이지만 브라우저에서 글꼴 크기를 조정하면 이 설계가 깨집니다.글꼴 크기 조정은 일반적으로 바로 가기 +키 + 또는 +-를 사용하여 수행됩니다.그래서 좋은 관행은 그들의 것을 대신 사용하는 것입니다.

px를 사용하여 너비 정의

여기 예시가 있습니다.세련된 날짜 상자로 바꾸고 싶은 div 태그가 있다고 가정하면 다음과 같은 HTML 코드가 있을 수 있습니다.

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

은 간한구다폭정을다의니의 할 수 있습니다.date-box:

* { 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;
}

그 문제는

그러나 브라우저에서 텍스트 크기를 조정하려면 디자인이 손상됩니다.또한 텍스트는 플로딘이 지적한 SO의 설계에서 발생하는 것과 거의 동일하게 상자 외부에서 블리딩됩니다.이는 상자가 잠겨 있을 때 폭이 동일한 크기로 유지되기 때문입니다.50px.

대신 em을 사용합니다.

보다 현명한 방법은 ems 단위로 너비를 정의하는 것입니다.

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

이렇게 하면 날짜 상자에 유동적인 디자인이 적용됩니다. 즉, 날짜 상자에 대해 정의된 글꼴 크기에 비례하여 텍스트와 함께 크기가 조정됩니다.예에서 는 이예서글크다같음이정다니의됩과기는꼴에다로 정의됩니다.*10pt로 크기가 해당 글꼴 크기의 2.5배로 커집니다.따라서 브라우저에서 글꼴 크기를 조정할 때 상자의 크기는 해당 글꼴 크기의 2.5배가 됩니다.

여기 토마스 러터의 투표된 1위 답변은 그들에 대한 그의 답변이 옳습니다.하지만 픽셀의 크기에 대해서는 매우 잘못된 것입니다.그래서 비록 그것이 오래되었지만, 저는 그것이 토론되지 않도록 내버려 둘 수 없습니다.

컴퓨터 화면은 일반적으로 96dpi가 아닙니다! (Oppi, 만약 당신이 현학적으로 하고 싶다면.)

픽셀은 고정된 물리적 크기를 가지고 있지 않습니다.
(예, 한 화면에서만 고정되지만 다음 화면에서는 픽셀이 1/96인치가 아니라 더 크거나 작을 가능성이 높습니다.)



960픽셀 길이의 선을 그립니다.물리적 자로 측정합니다.10인치입니까?아니...?
노트북을 TV에 연결합니다.지금 줄이 10인치입니까?아직도?
아이폰에 라인을 표시합니다.여전히 같은 사이즈?왜 안 되나요?

도대체 누가 96dpi 컴퓨터 화면 신화를 발명했습니까?
(일부 종교는 72dpi 신화로 운영됩니다.하지만 똑같이 틀렸습니다.)

글꼴 크기에 따라 크기를 조정해야 하는 모든 작업에 유용합니다.

글꼴 크기를 조정하여 확대/축소를 구현하는 브라우저에서 특히 유용합니다.그래서 만약 당신이 모든 요소들의 크기를 조절한다면,em그에 따라 크기가 조정됩니다.

왜냐하면 http://en.wikipedia.org/wiki/Em_(typography)) 은 현재 사용 중인 글꼴 크기에 정비례하기 때문입니다.글꼴 크기가 예를 들어 16점이면 한 em은 16점입니다.글꼴 크기가 16픽셀인 경우(참고: 점과 동일하지 않음) 1em은 16픽셀입니다.

이로 인해 두 가지(관련)가 발생합니다.

1. 나중에 CSS에서 글꼴 크기를 편집하기로 선택하면 비율을 유지하는 것이 쉽습니다.
2. 대부분의 브라우저는 CSS를 무시하고 사용자 지정 글꼴 크기를 지원합니다.모든 항목을 픽셀 단위로 설계하면 이러한 경우 레이아웃이 손상될 수 있습니다.그러나 ems를 사용하는 경우 이러한 재정의를 통해 이러한 문제를 완화할 수 있습니다.

그래픽 요소를 정확하게 배치하려면 px를 사용합니다.라인 높이 등과 같은 텍스트 요소 주변의 위치 지정 및 간격 지정을 수행해야 하는 측정에 em을 사용합니다. px는 픽셀 정확하며, em은 사용 중인 글꼴에 따라 동적으로 변경될 수 있습니다.

예:

코드: body{font-size:10px;} //아래의 모든 크기를 10으로 유지합니다. 이 값을 변경하고 나머지는 이 값의 1.4로 변경합니다.

1{px-size:1.2em;} //12ppm

2{size:1.4em;} //14인치

3{size:1.6em;} //16ppm

4{size:1.8em;} //18인치

5{px-size:2em;} //20px

…

몸

1

2

3

4

5

본문의 값을 변경함으로써 나머지 값은 기본값의 일종으로 자동으로 변경됩니다.

10×2=20 10×1.6=16 등

기본값을 8자리로 지정할 수 있으므로 8×2=168×1.6=12.8 //브라우저로 반올림할 수 있습니다.

매우 실용적인 이유는 IE 6에서는 글꼴을 px로 지정할 경우 크기를 조정할 수 없지만 em 또는 백분율과 같은 상대적 단위를 사용할 경우 크기를 조정할 수 있기 때문입니다.사용자가 글꼴 크기를 조정할 수 없도록 하면 접근성에 매우 좋지 않습니다.비록 그것이 감소하고 있지만, 여전히 많은 IE6 사용자들이 있습니다.

픽셀은 절대 단위인 반면,rem/em상대 단위입니다.자세한 내용: https://drafts.csswg.org/css-values-3/

크기가 시스템의 폰트 조정되도록 하려면 상대 단위를 사용해야 .font-sizeHTML 요소인 루트 요소에 대한 값입니다.

있는 , "Google Chrome"은font-size설정한 HTML 하여 Chrome의 로 웹 .rem/em 단위들

사용하는 경우px 글꼴 는 조정되지 않습니다.rem/em시스템의 글꼴 크기를 변경하면 장치의 크기가 조정됩니다.

그러니깐 사용px는 크를고여사용원때할를기하정하기때▁you원을 사용합니다.rem/em시스템 크기에 맞게 크기를 조정/동적으로 설정할 수 있습니다.

Em 또는 백분율을 사용하는 주요 이유는 사용자가 설계를 손상시키지 않고 텍스트 크기를 변경할 수 있도록 하기 위해서입니다.px에 지정된 글꼴로 설계할 경우 사용자가 텍스트 크기를 더 크게 선택해도 크기가 변경되지 않습니다(IE 6 등).이것은 시각 장애가 있는 사용자에게 매우 좋지 않습니다.

이와 같은 디자인에 대한 몇 가지 예와 기사(선택할 수 있는 것은 무수히 많다)는 A List Apart: Fluid Grids 최신호, CSS의 텍스트 크기 조정 방법 또는 Dan Cederholm의 방탄 웹 디자인을 참조하십시오.

이미지는 여전히 px 크기로 표시되어야 하지만 일반적으로 텍스트 크기를 px로 지정하는 것은 좋은 형식으로 간주되지 않습니다.

개인적으로 IE6를 싫어하기는 하지만, 현재 Fortune 200 회사의 대부분의 사용자에게 승인된 유일한 브라우저입니다.

px를 사용하여 글꼴 크기를 지정하지만 CSS 파일에 이를 배치하여 em이 제공하는 유용성을 원한다면 간단한 해결책이 있습니다.

body {
  font-size: 62.5%;
}

이제 다음과 같은 태그를 지정합니다.

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 */
}

등등.

IE6이 사이트에서 삭제될 때까지 글꼴 크기에 사용할 수 있습니다.Px는 (텍스트 줌과 반대로) 페이지 줌이 표준 동작이 되면 괜찮을 것입니다.

Trainamer에서 이미 필요한 링크를 제공했습니다.

일반적으로 글꼴 크기 조정은 브라우저/플랫폼 간에 일관성이 있기 때문에 백분율을 사용하는 것이 일반적입니다.

그런데 재미있네요, 저는 항상 글꼴 크기 조정을 위해 pt를 사용했고 모든 사이트가 그것을 사용한다고 생각했습니다.일반적으로 다른 앱(예: Word)에서는 px 크기를 사용하지 않습니다.인쇄용이라서 그런 것 같습니다만 웹 브라우저에서는 워드와 크기가 같습니다.

계산된 값을 찾는 것이 더 쉽기 때문에 em 또는 px rem을 대신 사용하지 마십시오.하지만 em과 px 사이에서는 em을 디버깅하기가 어렵기 때문에 px가 더 좋습니다.

언급URL : https://stackoverflow.com/questions/609517/why-em-instead-of-px