질문 : CSS에서 px 또는 rem 값 단위를 사용해야합니까?
새 웹 사이트를 디자인하고 있으며 가능한 한 많은 브라우저 및 브라우저 설정과 호환되기를 원합니다. 글꼴 및 요소의 크기에 사용할 측정 단위를 결정하려고하는데 결정적인 답을 찾을 수 없습니다.
내 질문은 : 내 CSS에서 px 또는 rem
- 지금까지
px사용은 브라우저에서 기본 글꼴 크기를 조정하는 사용자와 호환되지 않는다는 것을 알고 있습니다. - 나는 그들이 계단식으로
rem비해 유지 관리가 더em때문에 무시했습니다. - 어떤 사람들은
rem은 해상도에 독립적이므로 더 바람직하다고 말합니다. 그러나 다른 사람들은 대부분의 최신 브라우저가 어쨌든 모든 요소를 동일하게 확대하므로px사용하는 것은 문제가되지 않는다고 말합니다.
CSS에서 가장 바람직한 거리 측정 기준이 무엇인지에 대한 의견이 많고 어느 것이 가장 좋은지 잘 모르겠습니다.
답변
요약 : px 사용합니다.
- 첫째, 사양 에 따라 CSS
px단위 가 하나의 물리적 디스플레이 픽셀과 같지 않음을 아는 것이 매우 중요합니다. 이것은 1996 년 CSS 1 사양 에서도 항상 사실이었습니다. CSS는 96dpi 디스플레이에서 픽셀의 크기를 측정 하는 참조 픽셀을 정의합니다. (Retina 디스플레이와 같이) 96dpi와 실질적으로 다른 dpi를 갖는 디스플레이에서 사용자 에이전트는px단위의 크기가 참조 픽셀의 크기와 일치하도록 크기를 조정합니다. 즉,이 크기 조정은 정확히 1 개의 CSS 픽셀이 2 개의 물리적 Retina 디스플레이 픽셀과 동일한 이유입니다. 즉, 널리 사용되는 모든 디스플레이가 약 96dpi 였기 때문에 2010 년까지 (그리고 모바일 줌 상황에도 불구하고)px - 에 지정된 크기
em들 부모 요소를 기준으로합니다. 이로 인해 중첩 된 요소가 점진적으로 커지거나 작아em예를 들면 :
우리에게 주어지다:body { font-size:20px; } div { font-size:0.5em; }<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25px - 항상 루트
html요소에만 상대적인 CSS3rem은 이제 사용중인 모든 브라우저의 96 %에서 지원됩니다.
의견
나는 모든 사람이 페이지를 디자인하여 모든 사람을 수용하고 시각 장애인을 배려하는 것이 좋다는 데 동의한다고 생각합니다. 이러한 고려 사항 중 하나 (유일한 것은 아닙니다!)는 사용자가 사이트의 텍스트를 더 크게 만들어 읽기 쉽도록하는 것입니다.
처음에 사용자에게 텍스트 크기를 조정하는 방법을 제공하는 유일한 방법은 상대 크기 단위 (예 : em )를 사용하는 것입니다. 이는 브라우저의 글꼴 크기 메뉴가 단순히 루트 글꼴 크기를 변경했기 때문입니다. px 에서 글꼴 크기를 지정한 경우 브라우저의 글꼴 크기 옵션을 변경할 때 크기가 조정되지 않습니다.
최신 브라우저 (및 그다지 최신 버전이 아닌 IE7)는 모두 기본 크기 조정 방법을 이미지 및 상자 크기를 포함한 모든 항목을 단순히 확대하는 것으로 변경했습니다. 기본적으로 참조 픽셀을 더 크게 또는 더 작게 만듭니다.
예, 누군가는 여전히 브라우저 기본 스타일 시트를 변경하여 기본 글꼴 크기 (이전 스타일의 글꼴 크기 옵션과 동일)를 조정할 수 있지만 이는 매우 난해한 방법이며 아무도 1 하지 않을 것입니다. (Chrome에서는 고급 설정, 웹 콘텐츠, 글꼴 크기 아래에 숨겨져 있습니다. IE9에서는 훨씬 더 숨겨져 있습니다. Alt를 누르고보기, 텍스트 크기로 이동해야합니다.) 확대 / 축소 옵션을 선택하는 것이 훨씬 쉽습니다. 브라우저의 기본 메뉴 (또는 Ctrl + +/-/마우스 휠).
1-당연히 통계적 오류 내에서
대부분의 사용자가 확대 / 축소 옵션을 사용하여 페이지를 확장한다고 가정하면 상대 단위는 거의 관련이 없습니다. 모든 것이 동일한 단위로 지정되고 (이미지가 모두 픽셀로 처리됨) 합성에 대해 걱정할 필요가없는 경우 페이지를 개발하는 것이 훨씬 쉽습니다. ( "나는 수학이 없다고 들었다" – 1.5em이 실제로 작동하는 것을 계산해야하는 문제가있다.)
글꼴 크기에 상대적인 단위 만 사용하는 또 다른 잠재적 인 문제는 사용자 크기 글꼴이 레이아웃의 가정을 깨뜨릴 수 있다는 것입니다. 예를 들어 텍스트가 잘 리거나 너무 오래 실행될 수 있습니다. 절대 단위를 사용하는 경우 레이아웃이 깨져서 예상치 못한 글꼴 크기에 대해 걱정할 필요가 없습니다.
그래서 제 대답은 픽셀 단위를 사용하는 것입니다. 나는 모든 것에 px 물론 상황이 다를 수 있으며 IE6을 지원해야한다면 (RFC의 신이 자비를 베푸는 경우도 있음) em 을 사용해야합니다.
출처 : https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| JSLint : "use strict"의 함수 형식을 사용합니다. (0) | 2021.08.04 |
|---|---|
| JavaScript의 특정 색인에서 문자를 바꾸는 방법 (0) | 2021.08.04 |
| 텍스트 선택 강조 표시를 비활성화하는 방법 (0) | 2021.08.03 |
| 구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. (0) | 2021.08.03 |
| HTML5 로컬 저장소와 세션 저장소 (0) | 2021.08.03 |