이것은 px, em 및 rem에 대해 자세히 설명하는 고급 주제 기사입니다.
고정 너비 페이지 및 적응 너비 페이지
px, em 및 rem의 차이점을 명확히 하려면 이 주제부터 시작해야 합니다.
사실 처음에는 페이지의 고정 너비를 이해할 수 없었습니다.
다음 JD.com 페이지는 1080*1920 해상도의 화면에 표시됩니다.
다음 JD.com 페이지는 1366*728 해상도의 14인치 노트북에 표시됩니다.
jd 웹 사이트의 너비가 다른 해상도에서 동일하다는 것을 알면 매우 이상합니다. 적응해야 하지 않겠습니까? 그런데 큰 공장들이 이렇게 하는 걸 보면 할 말이 없다.
안드로이드 개발을 해보셨다면 안드로이드 어플리케이션은 화면에 맞게 적응해야 하고, 일치하지 않으면 화면이 비정상적으로 나오게 된다는 사실을 아실 것입니다. 사실, 아무도 옳고 그름이 없으며 단지 트레이드오프일 뿐입니다. 다른 플랫폼이 다르게 처리하고 이러한 차이에 대한 많은 이유가 있습니다. 운영 체제의 이유와 같은. Android의 기본 GUI 시스템은 매우 오래된 시스템입니다. 이 GUI 시스템의 최하층은 적응을 요구하므로 적응을 해야 합니다.
여기서 말하고 싶은 것은 적응 문제가 필수인지 여부입니다. BS 응용 프로그램의 경우. 안맞아도 문제없을거고 비례적으로 점점 작아질뿐 페이지 레이아웃은 바뀌지 않을거고 여기서는 휴대폰 디스플레이가 아닌 PC모니터의 디스플레이만 다루겠습니다. 그리고 고려해야 할 문제는 width를 800px로 할지 1024px로 할지, width를 1024px로 할지 1280px로 할지에 대한 문제는 추후에 다루도록 하겠습니다. 브라우저를 확대/축소하는 한 문제가 되지 않습니다.
모바일 단말기에서 PC 페이지의 적응 및 표시에 대해 논의하고 싶다면 그것은 완전히 다른 문제입니다. 더 이상 적응 여부의 문제가 아니라 모바일 버전을 개발하느냐의 문제다.
또 다른 이유는 페이지 디자이너가 생각하는 방식입니다. 고정 너비는 그들에게 자연스러운 것입니다. 확장을 고려하는 것은 이해하고 설계하기 어렵습니다.
사실 또 다른 중요한 이유는 수입 문제입니다. 적응해야 한다면 그림의 크기를 조절하기 어려운 등 여러 가지를 고려해야 합니다. 큰 화면에 작은 이미지를 표시하거나 작은 화면에 큰 이미지를 표시하는 것은 적절하지 않습니다. 별 문제없다고 하셨는데 비율에 따라 다른 사이즈의 사진을 요청할 수 있는데 실제로는 서버에 많은 부담을 주게 되어 상황이 복잡해집니다. 손실 가치가 없습니다. 고정 너비로 쓸 수도 있습니다.
절대 및 상대 단위
너비가 고정된 페이지를 개발하려는 경우 절대 단위 px가 최선의 선택입니다. 적응형 너비로 페이지를 개발하려면 em 및 rem과 같은 상대 단위를 고려해야 합니다.
우리는 모두 픽셀 단위 px에 너무 익숙합니다. 웹 사이트 개발의 픽셀 px는 여전히 물리적 픽셀과 다르다는 점에 유의해야 합니다. CSS 픽셀은 특히 고화질 화면(retina 화면)에서 디스플레이의 픽셀과 정확히 일치하지 않습니다. 일부 초고해상도 화면(예: Apple의 4k 모니터)에서는 확대되지 않은 고정 크기의 소프트웨어가 매우 작게 보이기 때문에 운영 체제가 모든 응용 프로그램을 강제로 확대합니다. 그러나 웹 사이트의 경우 구조 비율이 변경되지 않기 때문에 이에 대해 신경 쓸 필요가 없습니다.
Em과 rem은 텍스트에 따라 적응적입니다. 상대적인 단위입니다. 상대 단위의 장점은 적응할 수 있다는 것입니다. 단점은 디자인이 복잡하다는 것입니다.
이름의 유래
네, 처음에는 em이 어떤 단어가 약어인지 굉장히 궁금했는데, 공식 문서에는 그렇게 나와 있지 않았습니다. 오랫동안 확인한 결과 요약하면 다음과 같습니다.
1. em은 약어가 아닙니다.
2. em은 인쇄업에서 나오는데, 인쇄는 글자의 크기를 고려해야 하며, M의 크기는 거의 정사각형에 가깝습니다. 따라서 다른 글자는 M자를 기준으로 하여 디자인한다. M의 영어 발음(음성 기호)은 em입니다.
이야기는 완벽하게 이해되며 em은 CSS의 문자 크기와 관련이 있습니다. 이야기가 사실인지 여부는 중요하지 않습니다.
https://www.w3cplus.com/css/rip-rem-viva-css-reference-pixel.html
em의 개념과 사용법
CSS에서 1em은 현재 요소의 글꼴 크기와 같습니다. 글꼴 크기를 설정하지 않은 경우 기본 글꼴 크기는 16px이고 1em은 기본적으로 16px입니다.
#box {
display: inline-block;
padding: 1em;
}
글꼴 크기를 수정한 후 1em의 값도 변경되었습니다. 이제 1em=20px입니다.
#box {
display: inline-block;
font-size: 20px;
padding: 1em;
}
CSS 텍스트 그리기
많은 사람들이 텍스트가 매우 간단하다고 생각하는데 표시할 수 있습니까? 실제로는 그렇지 않으니 아래에서 그 효과를 보자.
아래 그림에는 기능이 너무 많아서 간과하거나 오해할 수 있습니다.
1. 텍스트의 왼쪽과 오른쪽과 div의 가장자리 사이에 간격이 있습니다. 글자가 작으면 보이지 않고 달라붙는 것으로 착각할 수 있습니다.
2. 하단의 문자 g는 div 주변에 가깝게 나타납니다. 하지만 그렇지 않습니다.글꼴을 매우 크게 설정하면 여전히 div 가장자리와 간격이 있음을 알 수 있습니다. 작은 틈.
3. 문자 f가 눈에 띄긴 하지만 여전히 div의 위쪽 가장자리에서 멀리 떨어져 있음이 분명합니다.
<div class="above">agofe</div>
.above{
display:inline;
background-color: lightblue;
font-size:500px
}
더욱이 이러한 간격은 텍스트의 필수적인 부분이기 때문에 제거할 수 없습니다.
그 이유를 설명하기 위해 그림을 그렸습니다.
높이 관점에서 CSS 텍스트 그리기에는 아래의 위쪽 및 아래쪽 선이 없을 수 있습니다. 그러나 텍스트의 하단과 상단에 해당하는 두 줄의 상승 및 하강이 있습니다. 행간은 텍스트 기준선을 나타냅니다.
이 그림을 읽으면 위의 현상을 설명할 필요가 없습니다.
em의 상대적인 의미와 계산 문제
em은 부모 요소의 글꼴 크기를 기본 값으로 상속합니다.
<div id="box">
<div class="outer">
outer
<div class="inner">inner</div>
</div>
</div>
.outer{
height: 1em;
background-color: lightgreen;
width: 200px;
}
.inner{
font-size: 1.2em;
height: 1em;
background-color: lightblue;
width: 200px;
}
outer는 body에서 기본 크기인 16px를 상속합니다. 같은 높이를 1em으로 하고, 안쪽의 높이가 바깥쪽의 높이보다 현저히 크다. 이는 .inner가 글꼴 크기를 내부 높이=outer.height*1.2*inner.height로 설정하기 때문입니다.
Em의 상속 특성 또는 기존 문제
em은 부모 요소의 글꼴 크기를 기본 값으로 상속합니다. 이것은 기능으로 간주되지만 동시에 매우 심각한 문제입니다.
목적 자체가 글꼴을 확대하는 것이라면 위의 코드는 괜찮습니다. 중첩 수준이 여러 개인 경우 문제가 발생할 수 있습니다.
예를 들어 다단계 목록이 있습니다. ul의 텍스트 크기를 1.2em으로 설정하고 싶습니다. 내 원래 의도는 모든 ul의 크기는 1.2em, 즉 1.2 16px입니다. 그러나 문제가 있습니다. ul의 글꼴 크기가 점진적으로 확대되었습니다. 원래의 의도는 상속으로 인해 같은 크기를 갖는 것이었고 첫 번째 ul의 텍스트 크기는 16px 1.2입니다. 두 번째 ul 텍스트 크기는 (16px*1.2)*1.2입니다. 또한 단계적으로 증폭되는 효과를 형성합니다.
이 문제가 해결되지 않으면 CSS는 다른 단위 rem을 제공합니다. rem은 루트 rem을 의미합니다. 즉, 표준으로 html 태그의 크기에 따라 기본값은 16px입니다. 이렇게 하면 상속 현상이 없고 루트 요소의 글꼴 크기가 표준으로 합의됩니다. 이 다단계 중첩 문제를 해결할 수 있습니다.
ul{
font-size: 1.2em;
}
<div>
<ul>
<li>Top Level</li>
<ul>
<li>Second Level</li>
<ul>
<li>Third Level</li>
</ul>
</ul>
</ul>
</div>
단계적으로 확대되지 않도록 rem:을 사용하십시오 . 물론 단계적으로 확대하고 싶다면 em을 사용하는 것이 문제가 아니라 기술일 수 있습니다.
ul{
font-size: 1.2rem;
}
글꼴 크기 및 브라우저 확대/축소 설정
브라우저는 웹 페이지를 전체적으로 확대/축소할 수 있습니다. ctrl+ 또는 ctrl-. 이 접근 방식은 웹 페이지를 개별적으로만 확장할 수 있으며 일시적입니다. 브라우저가 자동 확장을 지원하지 않는 이유를 잘 모르겠습니다. 또 다른 방법은 그들을 통하는 것입니다. 설정된 글꼴 크기에 따라 크기가 동적으로 변경되는 경우 이 방법은 영구적입니다. 단점은 전체가 영향을 받지 않는다는 것입니다. 예를 들어 사진은 px를 사용해야 합니다.
좋은 속임수가 아닌 픽셀 사고 중지
html의 기본 텍스트 크기는 16px이고 em을 사용하여 계산하는 것은 그리 편리하지 않습니다.예를 들어 20px의 텍스트를 원하면 20/16=1.25em으로 계산해야 합니다. 그런 다음 누군가 요청하는 방법을 생각할 수 있습니다. 0.625em*16px=10px이기 때문에 html의 글꼴 크기를 0.625em으로 설정하는 것입니다. 이렇게 하면 예를 들어 18px의 em 값을 계산하면 1.8em이라는 결론을 직접 내릴 수 있습니다.
하지만 이런 방식은 전형적인 픽셀 사고방식인데, 픽셀을 못 쓴다는 게 아니라 em을 쓸 때 픽셀에 집착하지 말고 상대적인 사고 단위를 써야 한다는 거죠. 가장 중요한 것은 이 접근 방식에는 분명한 단점이 있다는 것입니다.
1. 기본 10px가 상대적으로 작기 때문에 폰트를 설정할 때 폰트를 재설정해야 할 수 있어 매우 번거롭습니다.
2. 이 접근 방식의 핵심은 픽셀 사고입니다. em을 사용할 때 나는 여전히 px에 대해 생각합니다. 몸은 조영에 있고 마음은 한에 있다.
개선된 트릭도 있습니다:
rem을 사용할 때 빠르게 계산할 수 있습니다. 크기가 기록되지 않은 경우 기본 크기도 16px입니다. 그것은 단지 오래된 문제일 뿐이며 픽셀에 대해 생각하면서 여전히 em을 사용합니다.
html{
font-size:0.625em
}
body{
font-size:16px
}
em과 반응형 디자인
수년 전 부트스트랩이 매우 인기가 많았을 때 응답성의 개념도 매우 인기가 있었고 부트스트랩과 같은 UI 프레임워크의 기본 원리는 em의 상대 단위를 사용하여 구현되었으며 @media와 결합하여 다른 너비 표시를 달성했습니다. 다른 em 크기 .
구현된 논리는 다음과 유사합니다.
:root {
font-size: 0.75em;
}
@media (min-width: 800px) {
:root {
font-size: 1em;
}
}
@media (min-width: 1200px) {
:root {
font-size: 1.25em;
}
}
반응형 포지셔닝
반응형 레이아웃은 훌륭하지만 반응형 배치에 유의하십시오.
반응형은 기본적으로 앱이 아니라 웹사이트입니다. 반응성은 모바일 단말기에 표시되는 효과일 뿐이며, 모바일 단말기에 레이아웃을 만들고 싶다면 더 이상 반응성의 범위가 아니라 웹 버전의 앱입니다.
그리고 국내는 웹 버전의 APP을 작성할 수 없지만 작은 프로그램으로 할 수 있습니다. 사용자는 모바일 단말기의 조작에 실제로 적응했기 때문에 반응형 히든 메뉴에 익숙하지 않습니다.
그러나 비용 절감을 전제로 응답성도 App으로 볼 수 있습니다. 결국 모바일 단말기를 작성할 때 많은 것을 수정해야 합니다.
요약하다
제목으로 돌아가서 px, em, rem의 차이점이 무엇인지 말해야 한다면 기사에서 이미 모두 분석했습니다.
1.px는 고정 단위이고 em과 rem은 상대적인 단위이며,
2.em과 rem은 보다 유연하고 복잡한 반응형 기능을 구현할 수 있습니다. px는 비교적 간단합니다.
3.em, rem 및 글꼴 크기는 관련이 있습니다.