em 기반 크기 조정으로 반응 형 사이트 디자인

글꼴 크기에 상대적인 단위를 사용해야한다고 들었을 것입니다. 이는 액세스 가능한 웹 디자인을위한 좋은 규칙입니다. 사용자가 브라우저의 기본 글꼴 크기를 변경하면 이에 따라 페이지의 텍스트 크기가 조정됩니다. 이 조언을 받아 전환했을 수 있습니다. 계산기를 꺼내 사이트의 글꼴 크기를 절대 값에서 px ems 또는 더 가능성이있는 rems에 단위.

아동 도서 삽화의 종류

하지만 이것이 중단 된 경우 ems가 브라우저에 제공하는 많은 유연성과 성능을 놓치고있는 것입니다. em 단위는 단순히 익숙한 px ; 더 많은 속성에 사용할 수 있습니다. 글꼴 크기 . 그렇게하면 다른 혜택 중 일부가 나타나기 시작합니다.



ems를 지속적으로 사용하면 글꼴 크기가 변경 될 때 자동으로 응답하는 페이지의 구성 요소를 디자인 할 수 있습니다. 그런 다음 반응 형 글꼴 크기를위한 영리한 트릭을 사용하여 브라우저의 표시 영역 너비에 따라 동적으로 조정되는 전체 페이지를 생성 할 수 있습니다. ems의 '상대적'동작을 활용하여 확장 가능하고 반응이 빠른 디자인을 만드는 방법을 보여 드리겠습니다.



글꼴 크기 단위

글꼴 크기에 ems를 사용하는 것은 까다로울 수 있습니다. 정확한 값은 요소의 상속 된 글꼴 크기 (예 : 상위 요소의 글꼴 크기)에 의해 결정됩니다. 요소를 더 깊게 중첩하기 시작하면 복잡해집니다. 요소의 글꼴 크기가 ems이면 부모는 글꼴 크기가 ems이고 부모는 또 다른 글꼴 크기입니다. 하위 요소의 실제 계산 된 값을 결정하려면이 모든 값을 곱해야합니다.

즉, 동일한 모듈을 다른 컨테이너에 배치하면 의미가 변경 될 수 있습니다. 모듈은 예측할 수 없습니다.



이를 방지하기 위해 일반적으로 글꼴 크기에 대해 다른 상대 단위 인 rems를 사용합니다. rem (또는 'root em')은 상속 된 글꼴 크기가 아니라 페이지 루트 요소의 글꼴 크기를 기반으로합니다. . 이는 해당 값이 페이지 전체에서 동일 함을 의미합니다. 일반 em보다 예측 가능하며 종종 더 선호됩니다.

ems로 모듈 만들기

모듈을 만들기 위해 상대 단위를 사용합시다. 그러나 우리는 일반적인 접근 방식을 따르지 않을 것입니다. 모든 것에 rem을 사용하는 대신 모듈의 최상위 요소에서 한 번만 사용합니다. 이는 DOM에서 예측할 수없는 em 값 체인을 기반으로하는 것이 아니라 모듈에 대해 알려진 글꼴 크기를 설정합니다. 이는 단일 값을 재정 의하여 모듈의 크기를 쉽게 확장 할 수 있음을 의미합니다.

가장 바깥 쪽 요소에 rems를 사용하여 알려진 글꼴 크기를 설정 한 다음 ems를 사용하여 해당 값을 기반으로 빌드합니다.



가장 바깥 쪽 요소에 rems를 사용하여 알려진 글꼴 크기를 설정 한 다음 ems를 사용하여 해당 값을 기반으로 빌드합니다.

이 알려진 글꼴 크기를 설정 한 후에는 모듈 전체에서 일반 ems를 사용하는 것이 안전합니다. 하위 요소의 글꼴 크기뿐만 아니라 다음을 포함한 대부분의 다른 속성에도 사용하십시오. , 여유테두리 반경 .

제목과 본문이있는 패널을 만들 것입니다. 마크 업은 다음과 같습니다.

Behold the power of ems

Consider the ways you can leverage relative units for dynamic sizing of your modules.

외부 컨테이너의 스타일을 지정하겠습니다. 글꼴 크기를 1rem 지역 em 가치를 확립하기 위해. 그런 다음 테두리 반경 ems를 사용하여. 나는 일반적으로 테두리에 px를 사용하여 멋진 선을 그리는 것을 좋아합니다.

.panel { font-size: 1rem; border: 1px solid #678; border-radius: 0.3em; overflow: hidden; }

다음으로 내부 요소의 스타일을 지정합니다. 패딩에 ems를 사용할 것입니다. 그런 다음 제목의 글꼴 크기를 로컬 em 값의 1.25 배로 늘려 계산 된 크기를 20px로 만듭니다.

.panel-heading { padding: 0.6em 1.2em; background-color: #cde; border-bottom: 1px solid #678; } .panel-heading > h3 { font-size: 1.25em; margin: 0; letter-spacing: 0.03em; } .panel-body { padding: 0.6em 1.2em; }

패딩 값에 글꼴 크기를 곱하여 계산 된 값 (세로 9.6px 및 가로 19.2px)을 결정할 수 있습니다. 하지만 사실은 중요하지 않습니다. 픽셀 단위의 완벽한 측정에 얽매이지 않도록하십시오. 어색 할 수 있지만 계속 누르십시오. ems를 많이 사용할수록 자신의 관점에서 하나의 단위로 더 많이 익숙해 질 것입니다.

디자인을 동적으로 확장

이와 같이 재사용 가능한 모듈을 만들 때 몇 가지 변형이 필요한 경우가 많습니다. 더 큰 버전을 만들고 싶다고 가정 해 보겠습니다. 모든 것에 px를 사용했다면 글꼴 크기, 패딩, 테두리 반경 등을 늘릴 수 있습니다. 그러나 하나의 rem 기반 글꼴 크기와 관련하여 모든 것을 정의했기 때문에 해당 값만 변경하면 전체 모듈이 다음과 같이 응답합니다.

포토샵에서 개체를 미러링하는 방법
.panel--large { font-size: 1.2rem; }

이 클래스를 패널에 추가하여 더 크게 만듭니다. . 이것은 em의 로컬 정의를 변경하므로 자식 요소의 글꼴 크기와 함께 테두리 반경 및 패딩도 변경됩니다. 단일 선언으로 모듈의 모든 부분의 크기를 조정했습니다.

ems를 사용하여 정의 된 패딩 및 테두리 반경이있는 패널 모듈

ems를 사용하여 정의 된 패딩 및 테두리 반경이있는 패널 모듈

마찬가지로 작은 버전을 만들 수 있습니다.

.panel--small { font-size: 0.8rem; }

rems의 최상위 글꼴 크기를 사용하여 모듈을 접지함으로써 안정적이고 예측 가능하게 만들었습니다. ems를 사용하여 다른 모든 것을 정의함으로써 우리는 모든 구성 요소 부분을 확장 가능하게 만들었습니다.

모듈 내부의 모든 것의 크기를 하나의 값으로 설정 한 다음 해당 값을 변경하여 모두 확장 할 수 있습니다.

모듈 내부의 모든 것의 크기를 하나의 값으로 설정 한 다음 해당 값을 변경하여 모두 확장 할 수 있습니다.

이것은 강력한 패턴입니다. 드롭 다운 메뉴에서 소셜 미디어 버튼에 이르기까지 페이지의 모든 항목에이 접근 방식을 사용할 수 있습니다. rem 값으로 모듈을 접지 한 다음 패딩에서 위치 지정, 아이콘 크기에 이르기까지 거의 모든 것에 em을 사용합니다.

반응 형 만들기

원칙을 한 단계 더 밀어 봅시다. 우리는 rems와 ems를 사용하여 모듈 (그리고 이론적으로 페이지의 다른 모든 모듈)의 크기를 조정했습니다. 이것은 궁극적으로 크기가 루트 요소의 글꼴 크기를 기반으로 함을 의미합니다. 그런 다음이 단일 값을 조정하여 전체 페이지가 차례로 응답하도록 할 수 있습니다.

다른 상대 단위를 가져 오겠습니다. vh . 이 단위의 계산 된 값은 사용자의 화면 크기에서 파생됩니다. 뷰포트 너비의 1 %와 같습니다. vh 단위를 사용하여 루트 글꼴 크기를 정의하면 미디어 쿼리없이 자동으로 크기가 조정됩니다. 루트의 글꼴 크기를 2vw :

html { font-size: 2vw; }

불행히도 그 효과는 너무 강합니다. 예를 들어 iPhone 6에서 이것은 너무 작은 5.5px로 계산됩니다. 마찬가지로 더 큰 화면에서는 부당하게 큽니다. 효과를 부드럽게하기 위해 CSS의 calc () 함수:

html { font-size: calc(0.6em + 1vw); }

이제 글꼴 크기는 부분적으로 안정된 값에서 파생되고 일부는 반응 형 값에서 파생됩니다. 이것은 훨씬 더 나은 효과를 생성합니다. 그만큼 0.6em 일종의 최소 글꼴 크기로 작동합니다. 이제 루트 em은 스마트 폰에서 약 13px에서 평균 데스크톱 화면에서 21px로 유동적으로 확장됩니다.

페이지가 확장 가능한 모듈로 구성되어 있고 각각은 rem 값에 기반하며 뷰포트에 따라 확장됩니다. 페이지는 3 단계 계층 구조로 구성되어 있습니다. 글꼴 크기를 간단하게 수정하여 전체 페이지, 개별 모듈 또는 단일 요소의 크기를 변경할 수 있습니다. ems와 rems를 신뢰하면 브라우저가 작업을 처리합니다.

줄 바꿈 및 기타 응답 문제를 제어하기 위해 가끔 미디어 쿼리를 추가해야 할 수도 있습니다. 하지만 ems와 rems를 사용하는 습관과 결합 된이 작은 코드는 거기에 많은 도움을 줄 것입니다.

아이폰 11이 아이폰 8 플러스보다 더 큽니까

이 기사는 원래 넷 매거진 문제 288; 여기서 사세요

관련 기사: