programing

CSS에서 px 또는 remvalue 단위를 사용해야 합니까?

oldcodes 2023. 8. 2. 09:23
반응형

CSS에서 px 또는 remvalue 단위를 사용해야 합니까?

저는 새로운 웹사이트를 설계하고 있으며 가능한 한 많은 브라우저 및 브라우저 설정과 호환되기를 원합니다.글꼴과 요소의 크기에 대해 어떤 단위의 측정을 사용해야 할지 결정하려고 하지만 결정적인 답을 찾을 수 없습니다.

제 질문은 다음과 같습니다.px또는remCSS?내 CSS에에?

  • 지금까지 저는 사용하는 것을 알고 있습니다.px브라우저에서 기본 글꼴 크기를 조정하는 사용자와 호환되지 않습니다.
  • 나는무니다습했시를 했습니다.em왜냐하면 그것들은 유지하는 것이 더 번거롭기 때문입니다.rem 그들이캐스케이드할 때, 그들이캐이할드때스케때▁s할드▁they.
  • 은 어떤사은들람▁that라고 말합니다.rems는 분해능과 독립적이므로 더 바람직합니다.하지만 다른 사람들은 대부분의 현대 브라우저들이 어쨌든 모든 요소들을 똑같이 확대해서 사용한다고 말합니다.px문제가 되지 않습니다.

CSS에서 가장 바람직한 거리 측정 방법이 무엇인지에 대해 많은 의견이 있고, 어떤 것이 최선인지 잘 모르기 때문에 질문합니다.

TL;DR: 사용px.

사실들

  • 먼저, 사양에 따라 CSS를 아는 것이 매우 중요합니다.px단위가 하나의 실제 디스플레이 픽셀과 같지 않습니다.이것은 1996년 CSS 1 사양에서도 항상 사실이었습니다.

    CSS는 96dpi 디스플레이에서 픽셀 크기를 측정하는 기준 픽셀을 정의합니다.96dpi와 상당히 다른 adpi를 가진 디스플레이(Retina 디스플레이와 같은)에서 사용자 에이전트는px단위의 크기가 기준 픽셀의 크기와 일치하도록 합니다.다시 말해, 이 재조정은 1 CSS 픽셀이 2개의 물리적 Retina 디스플레이 픽셀과 동일한 정확한 이유입니다.

    하지만,까지는 ( 줌 에도 불구하고까지는,px널리 사용되는 모든 디스플레이가 약 96dpi였기 때문에 거의 항상 하나의 물리적 픽셀과 동일했습니다.

  • 에 명시된 ems는 상위 요소에 상대적입니다.이것은 다음으로 이어집니다.em중첩된 요소가 점진적으로 커지거나 작아지는 의 "확장 문제"입니다.예:

      body { font-size:20px; } 
  div { font-size:0.5em; }

    제공:

      <body> - 20px
      <div> - 10px
          <div> - 5px
              <div> - 2.5px
                  <div> - 1.25px

  • CSS3rem " 상루상대인적만에트항▁root인상▁to적대"에만 입니다.html요소는 현재 사용 중인 모든 브라우저의 99.67%에서 지원됩니다.

오피니언

저는 여러분의 페이지를 모든 사람들이 수용할 수 있도록 디자인하고 시각 장애인들을 배려하는 것이 좋다는 것에 모두가 동의한다고 생각합니다.이러한 고려 사항 중 하나는 사용자가 사이트의 텍스트를 더 크게 만들어 읽기 쉽게 하는 것입니다.

을 사용자에게 제공하는 유일한 인 크기 단위(예: 처에사에를텍크조수기를정스있유할방것다사니는일는용상습법크하단한)를 사용하는 것이었습니다.)를 이었습니다.em크기를 입니다. 브라우저의 글꼴 크기 메뉴가 단순히 루트 글꼴 크기를 변경했기 때문입니다.따서글 크를지경우정한기꼴에 글꼴 px브라우저의 글꼴 크기 옵션을 변경할 때 크기가 조정되지 않습니다.

최신 브라우저(심지어 그다지 현대적이지 않은 IE7)는 모두 기본 스케일링 방법을 이미지와 상자 크기를 포함한 모든 것을 단순히 확대하는 방식으로 변경했습니다.기본적으로 기준 픽셀을 더 크게 또는 더 작게 만듭니다.

예, 누군가가 브라우저 기본 스타일시트를 변경하여 기본 글꼴 크기(이전 스타일 글꼴 크기 옵션과 동일)를 조정할 수 있지만, 이 방법은 매우 난해한 방법이며 아무도 하지 않을 것입니다1. (Chrome에서는 고급 설정, 웹 콘텐츠, 글꼴 크기에 포함되어 있습니다.)IE9에서는 훨씬 더 숨겨져 있습니다.Alt를 누르고 View, Text Size로 이동해야 합니다.)브라우저의 기본 메뉴에서 확대/축소 옵션을 선택하는 것이 훨씬 쉽습니다(또는 +-+//마우스 휠 사용).

1 - 통계적 오차 내에서 자연스럽게

대부분의 사용자가 확대/축소 옵션을 사용하여 페이지 크기를 조정한다고 가정하면 상대적인 단위는 대부분 관련이 없습니다.모든 것이 동일한 단위로 지정되어 있을 때(모든 이미지가 픽셀로 처리됨) 페이지를 개발하는 것이 훨씬 쉽고, 합성에 대해 걱정할 필요가 없습니다. ("수학은 없을 것이라고 들었습니다." – 1.5개의 항목이 실제로 무엇에 사용되는지 계산해야 합니다.)

글꼴 크기에 상대적 단위만 사용할 때 발생할 수 있는 또 다른 잠재적인 문제는 사용자 크기의 글꼴이 레이아웃에서 가정하는 사항을 위반할 수 있다는 것입니다.예를 들어 텍스트가 잘리거나 너무 오래 실행될 수 있습니다.절대 단위를 사용하는 경우 레이아웃이 손상되어 예상치 못한 글꼴 크기를 걱정할 필요가 없습니다.

그래서 제 대답은 픽셀 단위를 사용하는 것입니다.사용합니다px무보다도엇다 달라질 수 , 만약 당신이 , 물당의상다수있며으를양할황만은론약한지, 당이신지해야면다베를자사 IE6기용니할것입야해풀를의 (를 사용해야 할 입니다.em

저는 훌륭한 역사적 맥락을 제공한 조쉬 3736의 답변을 칭찬하고 싶습니다.잘 표현되었지만, 이 질문이 있은 후 거의 5년 동안 CSS 환경이 바뀌었습니다.이 질문을 받았을 때,px 정답은 맞았지만, 오늘날 그것은 더 이상 사실이 아닙니다.

tl;dr: 사용rem

장치 개요

px단위는 일반적으로 하나의 장치 픽셀을 나타냅니다.장치의 픽셀 밀도가 점점 더 높기 때문에 Apple의 Retina Display와 같은 많은 장치에는 더 이상 이러한 기능이 적용되지 않습니다.

remunits는 rootem 크기를 나타냅니다.그것은font-size하는 것이 :rootHTML의 경우, 그것은<html>; SVG의경, 은것그입니다.<svg>기본값은 입니다.font-size 브라우저에서는 모든브에저*입니다.16px.

사용에 px

인터넷에서 사용하는 대부분의 CSS 예제px값이 실질적인 표준이기 때문에 값을 참조하십시오.pt,in그리고 다양한 다른 단위들이 이론적으로 사용될 수 있었지만, 작은 값들을 잘 처리하지 못했습니다. 여러분이 빠르게 입력하기 더 길고 추론하기 어려운 분수에 의존해야 하기 때문입니다.

얇은 테두리를 원하신다면,px당신은 사용할 수 있습니다.1px,와 함께pt당신은 사용해야 할 필요가 있습니다.0.75pt일관된 결과를 얻기 위해, 그리고 그것은 매우 편리하지 않습니다.

사용에 rem

rem의본기입니다.16px그것의 사용에 대한 강력한 주장은 아닙니다. 기0.0625rem쓰는 것보다 더 안 좋습니다.0.75pt그래서 왜 누가 그걸rem?

두부이있다습 두 부분이 .rem다른 유닛보다 유리합니다.

  • 사용자 기본 설정이 존중
  • 겉보기를 변경할 수 있습니다.px의 값rem 것은 이든지.

사용자 기본 설정 존중

브라우저 확대/축소는 지난 몇 년 동안 많이 변했습니다.과거에는 많은 브라우저가 확장만 가능했습니다.font-size하지만 웹사이트들이 누군가가 확대하거나 축소할 때마다 그들의 아름다운 픽셀 완벽한 디자인이 깨진다는 것을 깨달았을 때 그것은 매우 빠르게 변했습니다.이 시점에서 브라우저는 전체 페이지의 크기를 조정하므로 글꼴 기반 확대/축소가 불가능합니다.

사용자의 희망을 존중하는 것은 불가능하지 않습니다.브라우저가 다음으로 설정되어 있다고 해서16px기본적으로, 어떤 사용자도 환경설정을 변경할 수 없음을 의미하지 않습니다.24px또는32px낮은 시야 또는 낮은 시야(예: 스크린 글레어)를 보정합니다.만약 당신이 당신의 부대를 기초로 한다면.rem글꼴 크기가 큰 사용자는 비례적으로 더 큰 사이트를 볼 수 있습니다.경계는 더 커질 것이고, 패딩은 더 커질 것이고, 마진은 더 커질 것이고, 모든 것이 유동적으로 확장될 것입니다.

를 디어쿼기되경는우반이미에 기반을 둔.rem또한 사용자가 보는 사이트가 화면에 맞는지 확인할 수 있습니다.의사자가 사용자font-size로 설정한.32px에서.640px으로 볼 수 .16px에서.320px와이드 브라우저응답성이 뛰어난 웹 디자인(RWD)을 사용하는 데 있어 손실이 전혀 없습니다.rem.

px값

ㅠㅠrem를 기반으로 합니다.font-size의 시대의:root이 무엇을 , 변할내용경.1rem를 나타냅니다. 당신이 해야 할 일은 변경하는 것입니다.font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>

당신이 무엇을 하든, 설정하지 마세요.:root원의font-sizepxvalue.value.value.

를 하면,font-sizehtmlpx가치, 당신은 사용자의 기본 설정을 되돌릴 방법 없이 날려버렸습니다.

의 겉보기 값을 변경하려는 경우rem,사용하다% 단위들

이를 위한 계산은 상당히 간단합니다.

기글 크기꼴의 글꼴 :root이라16px하지만 우리가 그것을 바꾸고 싶다고 합시다.20px우리가 해야 할 일은 증식하는 것입니다.16얻을 만한 가치가 있는.20.

방정식을 설정합니다.

16 * X = 20

다음을 위해 해결합니다.X:

X = 20 / 16
X = 1.25
X = 125%


:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>

의 .20그렇게 대단하지는 않지만, 일반적인 제안은 겉으로 보이는 크기를 만드는 것입니다.rem 10px의 숫자는 그마의숫자는법▁for입니다.10/16은 어느것이것입니다.0.625또는62.5%.

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>

의 기본값인 ▁your▁that다▁the입니다.font-size a 머지페 너나는작설있어지만되정게있다이습해니결책한단간설한대정이에무이지▁for있:다:습설정▁a▁for▁set니▁is이▁page▁but책해결'▁way단s,▁that.font-sizebody용사를 rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

이러한 조정을 통해 다음과 같은 명백한 가치를 확인하는 것이 중요합니다.rem이라10px그 말은 당신이 썼을 수도 있는 가치를 의미합니다.px는 직접 바변환할수있다니습로로 할 수 .rem소수점 이하의 자리를 쳐서.

padding: 20px;

로 변하다.

padding: 2rem;

원하는 글꼴 크기는 사용자가 선택할 수 있으므로 사용할 수 없는 이유는 없습니다.

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

그리고 가지고 있습니다.1rem1px.

사용자의 요구를 존중하면서 CSS가 지나치게 복잡해지는 것을 피할 수 있는 간단한 해결책이 여기 있습니다.

잠깐만, 뭐가 문제야?

당신이 그것을 물어볼까봐 두려웠습니다.내가 가장하고 싶은 만큼rem마법이고 모든 것을 해결합니다. 여전히 주목할 만한 문제들이 있습니다.제 생각에는 거래 위반은 없지만, 제가 경고하지 않았다고 말할 수 없도록 그들을 불러낼 것입니다.

쿼리(미디사쿼 (리용어사)) 사용em)

가장 먼저 발생하는 문제 중 하나입니다.rem에는 미디어 쿼리가 포함됩니다.다음 코드를 고려합니다.

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

여기에 의 값이 있습니다.rem 쿼리가 ▁of▁value▁changes다▁depends▁on▁applies▁the니▁query집달라,따라값▁media-query▁depending▁the▁and미에▁the다음▁media디의 값에 따라 달라집니다.rem그래서 도대체 무슨 일이 일어나고 있는 겁니까?

rem에서는 미어쿼 합니다.font-size그리고 (Safari 섹션 참조)에 발생했을 수 있는 변경 사항을 고려해서는 안 됩니다.font-size의 시대의:root원소의다시 말해서, 그것의 명백한 가치는 항상 16px.

이것은 당신이 몇 가지 분수 계산을 해야 한다는 것을 의미하기 때문에 약간 짜증나는 일이지만, 저는 대부분의 일반적인 미디어 쿼리가 이미 16의 배수 값을 사용한다는 것을 발견했습니다.

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

또한 CSS 프리프로세서를 사용하는 경우 믹스인 또는 변수를 사용하여 미디어 쿼리를 관리할 수 있으므로 문제가 완전히 가려집니다.

사파리

가 있는데, 이 버그로 가 변경되었습니다.:root글꼴 크기는 실제로 계산된 내용을 변경합니다.rem미디어 쿼리 범위에 대한 값입니다.이것은 만약의 폰트 크기가:root미디어 쿼리 내에서 요소가 변경되었습니다.다행히도 수정은 간단합니다. 미디어 쿼리에 단위를 사용하십시오.

컨텍스트 전환

프로젝트 간에 다양한 프로젝트를 전환할 경우 다음과 같은 글꼴 크기를 사용할 수 있습니다.rem값이 다릅니다.한 프로젝트에서 다음과 같은 명백한 크기를 사용할 수 있습니다.10px다른 프로젝트에서 겉보기 크기가 있을 수 있는 경우1px이로 인해 혼란이 발생하여 문제가 발생할 수 있습니다.

여기서 제가 추천하는 유일한 방법은62.5%개종하기 위해rem의 겉보기 크기로10px왜냐하면 그것은 제 경험에서 더 흔했기 때문입니다.

공유 CSS 라이브러리

만약 당신이 내장된 위젯과 같이 당신이 통제하지 않는 사이트에서 사용될 CSS를 작성하고 있다면, 명백한 크기를 알 수 있는 좋은 방법은 정말 없습니다.rem가질 것입니다.만약 그렇다면, 언제든지 계속 사용하세요.px.

그래도 사용하려면rem그러나 스타일시트의 Sass 또는 LESS 버전을 변수와 함께 릴리스하여 다음의 명백한 크기에 대한 스케일링을 재정의하는 것을 고려하십시오.rem.

나는 누군가가 사용하는 것을 겁주고 싶지 않습니다.rem하지만 공식적으로 모든 브라우저가16px결석으로알다시피, 많은 브라우저들이 있고 한 브라우저가 예를 들어, 그렇게 약간 갈라지는 것은 그리 어렵지 않을 것입니다.15px또는18px그러나 테스트에서 기본 설정을 사용하는 시스템에서 기본 설정을 사용하는 브라우저가 다음과 같은 값을 가진 예는 단 한 번도 본 적이 없습니다.16px만약 당신이 그런 예를 발견한다면 저에게 공유해주세요.

이 기사는 의 장단점을 꽤 잘 설명하고 있습니다.px,em,그리고.rem.

저자는 마침내 가장 좋은 방법은 아마도 두 가지를 모두 사용하는 것이라고 결론짓습니다.px그리고.rem선언하는px이전 브라우저의 경우 먼저 실행하고 다시 선언합니다.rem최신 브라우저의 경우:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

예, REM과 PX는 상대적이지만 다른 답변에서는 PX를 통해 REM을 사용할 것을 제안했습니다. 또한 내게 필요한 옵션 예제를 사용하여 이를 백업하고 싶습니다.
사용자가 브라우저에서 다른 글꼴 크기를 설정하면 REM은 PX와 달리 웹 페이지의 글꼴, 이미지 등의 요소를 자동으로 확대/축소합니다.

아래 gif에서 왼쪽 텍스트는 글꼴 크기 REM 단위를 사용하여 설정하고 오른쪽 글꼴은 PX 단위로 설정합니다.

enter image description here

보시다시피 웹 페이지의 기본 글꼴 크기를 조정하면 REM이 자동으로 확대/축소됩니다(오른쪽 아래).

웹 페이지의 기본 글꼴 크기는 16px이며 1rem과 같습니다(기본 html 페이지의 경우에만 해당).html{font-size:100%}), 즉, 1.25rem은 20ppm과 같습니다.

추신: 또 누가 REM을 사용하고 있습니까? Bootstrap 4, Bulma CSS 등과 같은 CSS Frameworks! 그러니 더 잘 지내세요.

필요한 경우 전체 문서의 "확대/축소 수준"을 한 번에 변경할 수 있기 때문에 반사적인 답변으로 렘을 사용하는 것이 좋습니다.경우에 따라 크기를 상위 요소에 상대적으로 지정하려면 해당 요소를 사용합니다.

그러나 rem 지원은 얼룩덜룩하고 IE8은 폴리필이 필요하며 Webkit는 버그를 나타내고 있습니다.게다가, 하위 픽셀 계산은 때때로 한 픽셀 선과 같은 것들을 사라지게 할 수 있습니다.해결책은 이러한 매우 작은 요소에 대해 픽셀 단위로 코딩하는 것입니다.이것은 훨씬 더 복잡합니다.

따라서 전체적으로 CSS 내에서 전체 문서의 "확대 수준"을 변경하는 것이 얼마나 중요하고 가능성이 높은지 자문해 보십시오.

어떤 경우에는 예, 어떤 경우에는 아니오입니다.

따라서 필요에 따라 다르며, remandem을 사용하면 "일반적인" 픽셀 기반 워크플로우와 비교하여 몇 가지 추가적인 고려 사항이 발생하기 때문에 장단점을 따져봐야 합니다.

다음 두 블록의 CSS 코드는 동일한 결과를 생성하므로 CSS를 px에서 rem으로 전환(또는 변환)하는 것이 쉽다는 것을 명심하십시오(JavaScript는 다른 이야기입니다).

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

Josh3736의 답변은 좋지만 3년 후에 대안을 제시하자면 다음과 같습니다.

를 사용하는 것이 좋습니다.rem글꼴의 단위는 개발자인 사용자가 크기를 변경하는 것을 더 쉽게 하기 때문입니다.사용자가 브라우저에서 기본 글꼴 크기를 변경하는 경우는 거의 없으며 최신 브라우저 확대/축소가 확대되는 것은 사실입니다.px하지만 만약 당신의 상사가 당신에게 와서 "이미지나 아이콘을 확대하지 말고 모든 글꼴을 크게 하라"고 말한다면 어떻게 될까요?루트 글꼴 크기만 변경하고 다른 모든 글꼴의 크기를 이에 비례하여 조정한 다음 변경하는 것이 훨씬 쉽습니다.px크기는 수십 또는 수백 개의 CSS 규칙으로 표시됩니다.

여전히 사용하는 것이 타당하다고 생각합니다.px일부 이미지에 대한 단위 또는 설계의 크기에 관계없이 항상 동일한 크기여야 하는 특정 레이아웃 요소에 대한 단위입니다.

Caniuse.com 은 2012년 조쉬3736이 자신의 답변을 게시했을 때 브라우저의 75%만이라고 말했을 수 있지만, 3월 27일 현재 93.78%의 지지를 받고 있습니다.IE8만 추적하는 브라우저 중에서 지원하지 않습니다.

pt와 유사합니다.rem상대적으로 고정되어 있지만 거의 항상 DPI에 의존하지 않는다는 점에서, 심지어 비준수 브라우저가 처리하는 경우에도.px장치에 의존하는 방식으로.rem루트 요소의 글꼴 크기에 따라 다르지만 Sass/Compass와 같은 것을 사용하여 자동으로 이 작업을 수행할 수 있습니다.pt.

이 기능이 있는 경우:

html {
    font-size: 12pt;
}

그리고나서1rem항상 그럴 것은12pt.rem그리고.em일부 브라우저는 사양에 따라 작동하지 않고 처리합니다.px말 그대로.웹의 옛 시절에도 1포인트는 일관되게 1/72인치로 간주되었습니다. 즉, 1인치에는 72포인트가 있습니다.

호환되지 않는 이전 브라우저가 있고 다음과 같은 브라우저가 있는 경우:

html {
    font-size: 16px;
}

그리고나서1rem장치에 따라 달라질 수 있습니다.다음에서 상속되는 요소의 경우html기본적으로,1em또한 장치에 따라 다릅니다.12pt다음과 같이 보장되는 장치 독립적인 등가물이 될 수 있습니다.16px / 96px * 72pt = 12pt,어디에96px = 72pt = 1in.

특정 단위를 고수하려면 계산이 상당히 복잡해질 수 있습니다.예를들면,.75em of html = .75rem = 9pt,그리고..66em of .75em of html = .5rem = 6pt경험의 법칙:

  • 절대 크기에 사용합니다.만약 이것이 정말로 루트 요소에 대해 동적이어야 한다면, 당신은 CSS에 너무 많은 것을 요구하는 것입니다; 당신은 Sass/SCSS와 같이 CSS로 컴파일되는 언어가 필요합니다.
  • 상대적인 크기에 사용합니다."왼쪽 여백이 글자의 최대 너비 정도가 되었으면 합니다." 또는 "이 요소의 텍스트를 주변보다 조금 더 크게 만드십시오."라고 말할 수 있는 것은 매우 편리합니다.<h1>글꼴 크기는 다양한 위치에 나타날 수 있지만 항상 근처의 텍스트보다 커야 하기 때문에 ems에서 글꼴 크기를 사용하기에 좋은 요소입니다.이렇게 하면 적용되는 모든 클래스에 대해 별도의 글꼴 크기를 가질 필요가 없습니다.h1글꼴 크기가 자동으로 조정됩니다.
  • 아주 작은 크기에 사용합니다.아주 작은 사이즈로,pt96DPI에서 일부 브라우저에서 흐릴 수 있습니다.pt그리고.px줄을 서지 마세요.1픽셀의 얇은 테두리만 작성하려면 그렇게 말합니다.높은 DPI 디스플레이를 사용하는 경우 테스트 중에 이를 알 수 없으므로 언제든지 일반 96-DPI 디스플레이에서 테스트해야 합니다.
  • 높은 DPI 디스플레이에서 물건을 화려하게 만들기 위해 서브픽셀을 다루지 마십시오.일부 브라우저는 특히 높은 DPI 디스플레이에서 이 기능을 지원할 수 있지만 이 기능은 지원하지 않습니다.대부분의 사용자들은 크고 명확한 것을 선호하지만, 웹은 개발자들에게 그렇지 않다고 가르쳤습니다.최신 화면으로 사용자를 위해 확장된 세부 정보를 추가하려면 벡터 그래픽(읽기: SVG)을 사용할 수 있습니다.

웹 사이트의 글꼴 크기를 프로그래밍하는 가장 좋은 방법은 기본 글꼴 크기를 정의하는 것입니다.body그리고 다른 모든 것에 대해 그들(또는 렘)을 사용합니다.font-size그 후에 선언합니다.이것은 개인적인 취향이라고 생각합니다만, 저에게 좋은 도움이 되었고 또한 더 반응성이 높은 디자인을 쉽게 통합할 수 있었습니다.

rem 단위를 사용하는 것에 관한 한, 코드에서 진보적인 것과 이전 브라우저에 대한 지원 사이의 균형을 찾는 것이 좋다고 생각합니다.rem 장치에 대한 브라우저 지원에 대한 링크를 확인하십시오. 이 링크는 당신의 결정에 많은 도움이 될 것입니다.

반은 (하지만 반은) 비꼬는 대답입니다(나머지 반은 관료주의의 현실에 대한 쓰라린 경멸입니다).

vh 사용

모든 항목은 항상 브라우저 창에 맞게 크기가 조정됩니다.

항상 아래로 스크롤할 수 있지만 수평 스크롤은 사용할 수 없습니다.

신체 너비를 정적인 50vh로 설정하고, 부모 디브에서 뜨거나 이탈하는 CSS를 코드화하지 마십시오. (만약 그들이 그렇게 보이는 것을 조롱하려고 한다면, 배경 gif를 교묘하게 사용하면 그들을 궤도에서 벗어나게 할 수 있습니다.)그리고 테이블만 사용하여 모든 것이 예상대로 제자리에 고정되도록 스타일을 조정합니다.사용자가 수행할 수 있는 모든 ctrl+/- 작업을 취소하는 Javascript 기능을 포함합니다.

사용자는 사용하는 내용에 따라 사이트 흐름이 달라지지 않기 때문에(예: 텍스트가 너무 작아서 전화기에서 읽을 수 없는 경우) 사용자를 싫어하게 됩니다.여러분의 동료들은 아무도 제정신이 아니기 때문에 여러분을 싫어할 것이고, 여러분의 일을 망칠 가능성이 높기 때문입니다.당신의 프로그래밍 교수들은 이것이 좋은 생각이 아니기 때문에 당신을 싫어할 것입니다.당신의 UX 디자이너는 마감일을 맞추기 위해 해야 하는 UX 모형을 디자인할 때 깎은 모서리를 드러낼 것이기 때문에 당신을 싫어할 것입니다.

거의 모든 사람들이 여러분을 싫어할 것입니다. 여러분에게 사물을 모형과 일치시키고 빨리 그렇게 하라고 말하는 사람들을 제외하고 말입니다.그러나 (일반적으로 프로젝트 관리자를 포함하는) 그러한 사람들은 여러분의 정확성과 빠른 처리 시간에 열광할 것입니다.그리고 모든 사람들은 자신의 의견이 당신의 급여에 중요하다는 것을 알고 있습니다.

네, 아니면, 아니요.

어, 내 말은, 그건 중요하지 않아요.특정 프로젝트에 적합한 것을 사용합니다.PX와 EM 또는 둘 다 동일하게 유효하지만 전체 페이지의 CSS 아키텍처에 따라 약간 다르게 동작합니다.

업데이트:

명확하게 하기 위해, 저는 보통 당신이 어떤 것을 사용하는지는 중요하지 않다고 말하고 있습니다.경우에 따라 다른 것보다 특정한 것을 선택할 수도 있습니다.EM은 처음부터 시작할 수 있고 기본 글꼴 크기를 사용하고 모든 것을 관련지어 만들 수 있다면 좋습니다.

PX는 기존 코드 기반에 재설계를 적용하고 잘못된 중첩 문제를 방지하기 위해 px의 특수성이 필요할 때 종종 필요합니다.

언급URL : https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css

반응형

'programing' 카테고리의 다른 글

node.js, SSL이 있는 socket.io  (0) 2023.08.02
Xcode 6에서 IPA를 만드는 방법은 무엇입니까?  (0) 2023.08.02
CSS 크기 조정 및 잘라낸 이미지 표시  (0) 2023.08.02
각도 반응 양식 오류:폼 제어에 대한 값을 다음 이름으로 제공해야 합니다.  (0) 2023.08.02
MySQL의 INSERT IGNORE INTO & Foreign 키  (0) 2023.08.02

'programing'의 다른글

  • 현재글CSS에서 px 또는 remvalue 단위를 사용해야 합니까?

관련글

댓글

티스토리툴바