rem — 로우 프로파일 CSS 단위

rem은 지난 1~2년 사이에 인기가 높아지기 시작한 낮은 수준의 CSS 단위입니다. 많은 학생들이 rem을 사용하려고 시도하는 반면, 사용 중 문제에 직면하여 포기하는 학생들도 있습니다. 하지만 rem에 대한 나의 전반적인 평가는 확실히 웹 앱을 만드는 데 가장 적합한 후보 중 하나라는 것입니다.

렘이란 무엇인가요?

rem(루트 요소의 글꼴 크기)은 루트 요소를 기준으로 한 글꼴 크기의 단위를 나타냅니다. 쉽게 말하면 상대단위이다. rem을 보면 당연히 em 단위를 떠올리실 겁니다. Em(요소의 글꼴 크기)은 상위 요소를 기준으로 한 글꼴 크기의 단위를 나타냅니다. 한 계산 규칙은 루트 요소에 의존하고 다른 계산 규칙은 계산을 위해 상위 요소에 의존한다는 점을 제외하면 실제로는 매우 유사합니다.

웹 앱은 왜 rem을 사용하나요?

여기서 특히 웹 앱과 웹 페이지는 rem을 사용할 수 없다는 점을 강조합니다. 물론 가능하지만 호환성 때문에 웹 앱에서 rem을 사용하면 이 유닛의 가치와 기능을 더 잘 강조할 수 있습니다. , 일부 기업 웹 앱에서 화면 적응을 구현하는 방법을 살펴보겠습니다.

1. 강력한 화면 적응 레이아웃 구현:

최근 iPhone 6가 두 가지 크기로 출시되면서 모바일 화면 유형에 대한 혼란이 더욱 커졌습니다. 1~2년 전 앱을 적응시키는 방법 중 하나는 320 너비를 표준으로 사용하는 것입니다. 크기가 320을 초과하면 여전히 320 사양으로 표시됩니다. 이 구현 방법은 타오바오 웹 앱으로 표시되지만 최근에는 모바일 타오바오 홈페이지에서 볼 수 있습니다. rem을 사용하여 수정되었습니다. 이 단원에서 홈 페이지는 고정된 너비의 페이지와 유동적인 레이아웃의 페이지로 인해 이전과 마찬가지로 여전히 혼란스럽습니다.

우리가 페이지 레이아웃에 일반적으로 사용하는 단위는 절대 단위인 px입니다. 웹 앱 화면 적응에는 유동적 레이아웃, 제한된 너비 등 다양한 방법이 있습니다. 하지만 이러한 솔루션은 최고의 솔루션은 아닙니다.

예를 들어 유동 레이아웃 솔루션은 다양한 화면에 적응할 수 있지만 몇 가지 크기의 휴대폰에서만 완벽하게 표시할 수 있기 때문에 표시 효과가 매우 열악합니다. 상호 작용을 가장 원하지만 현재 업계에는 웹 앱에 유동적 레이아웃을 사용하는 많은 회사가 있습니다. 아래에서 수집한 사례 중 일부를 살펴보세요.

Amazon:

Ctrip:

Lanting:

위 사이트들은 모두 Fluid Layout 기술을 사용하고 있습니다. 페이지를 레이아웃할 때 너비를 백분율로 정의하지만 높이는 대부분 px로 고정되어 있으므로 대형 화면 휴대폰의 표시 효과는 일부 페이지 요소의 너비가 매우 길어지게 됩니다. 그러나 높이는 여전히 이전과 동일하며 실제 디스플레이는 매우 조율되지 않습니다. 이는 유동적 레이아웃의 가장 치명적인 단점입니다. 크기가 적은 휴대폰에서 나타나는 효과는 실제로 많은 시각적 디자이너에게 적합합니다. 대형 화면의 휴대폰에서 디자인 도면을 볼 때 가로로 늘어나는 것과 같은 효과가 나타나기 때문에 이러한 효과를 받아들일 수 없습니다.

Flow 레이아웃은 이를 구현하는 가장 이상적인 방법은 아닙니다. 많은 비율의 레이아웃을 사용하면 Fluid 레이아웃을 고려해야 하기 때문에 디자이너의 디자인에도 많은 제약이 따릅니다. , 가로로 늘어난 요소 레이아웃만 디자인할 수 있으며, 디자인 시 많은 제약이 따릅니다.

2. 너비 고정 방식

또 다른 방식은 초기에는 페이지 너비를 320으로 설정하고 남는 부분을 비워두는 방법이 있었습니다. 다행히도 시각적 디자인은 더 이상 유동적인 레이아웃에 의해 제한될 필요가 없으며 프런트 엔드는 기만적인 유동 레이아웃에 참여할 필요가 없습니다. 하지만 이 솔루션에도 몇 가지 문제가 있습니다. 예를 들어, 대형 화면의 휴대폰에서는 양쪽에 공백이 있고, 또 다른 하나는 모바일 타오바오 홈페이지가 원래 그랬던 것처럼 보입니다. 되었는데 최근에 수정이 되었어요. 그런데 티몰 홈페이지는 아직 수정이 안 됐어요.

3. 반응형 접근 방식

중국의 복잡한 웹사이트에서는 모바일 측면에서 이 접근 방식을 사용하는 경우가 거의 없습니다. 따라서 일반적으로 중소 규모의 포털이나 블로그 사이트에서는 반응형 방법을 사용하여 웹 페이지에서 웹 앱으로 한 단계로 직접 이동합니다. 이렇게 하면 비용을 절약할 수 있고 더 이상 자체 웹 사이트 버전에 맞게 웹 앱을 구축할 필요가 없기 때문입니다. .

4. 크기 조정을 위한 뷰포트 설정

1. e4732791685185db36aae5b613ff9224

티몰 웹앱 홈페이지는 이렇게 제작되었습니다. 너비 320을 기준으로 확장됩니다. 최대 확장은 320*1.3 = 416입니다. 기본적으로 최대 426까지 확장이 가능합니다. .iphone6 ​​plus의 화면이 깨졌습니다. 이 방법은 간단하고 투박하며 효율적입니다. 솔직히 말해서 rem을 사용하면 매우 효율적이라고 생각합니다. 이에 대해서는 다음에 설명하겠습니다. 그러나 일부 학생들은 사용 중에 스케일링 과정이 약간 흐릿하다고 보고했습니다.

rem은 모든 화면에 동일한 비율로 적응할 수 있습니다

위에서는 현재 대부분의 회사에서 주류로 사용되는 많은 웹 앱 적응 솔루션에 대해 이야기했습니다. 다음으로 rem의 작동 방식에 대해 이야기해 보겠습니다. 의.

위에서 언급했듯이 rem은 루트 요소를 통해 적용됩니다. 웹 페이지의 루트 요소는 html을 참조하며 html의 글꼴 크기를 설정하여 rem의 크기를 제어할 수 있습니다. 예:

html {
     font-size: 20px ;
}

.btn   {
     width:   6rem ;
     height:   3rem ;
     line-height:   3rem ;
     font-size:   1.2rem ;
     display:   inline-block ;
     background:   #06c ;
     color:   #fff ;
     border-radius:   .5rem ;
     text-decoration:   none ;
     text-align:   center ;    
}

Demo

위 코드의 결과 버튼 크기는 다음과 같습니다.

html을 넣었습니다. 계산을 용이하게 하기 위해 10px로 설정했는데, 왜 6rem이 60px와 같은가요? 현재 .btn의 스타일이 변경되지 않은 경우 html의 글꼴 크기 값을 변경하고 버튼에서 위의 변경 사항을 확인합니다.

html {
     font-size: 40px ;
}

Demo

버튼 크기 결과는 다음과 같습니다.

위의 너비와 높이는 위 결과의 2배가 되지만, html의 글꼴 크기만 변경했습니다. .btn 스타일의 너비, 웹의 버튼 크기는 변경되지만 높이의 rem으로 설정된 속성은 변경되지 않습니다.

사실 위의 두 가지 경우에서 rem이 1px인 양을 계산할 수 있습니다.

첫 번째 예:

120px = 6rem * 20px(루트 요소는 큰 값)

두 번째 예:

240px = 6rem * 40px(루트 요소는 큰 값을 설정)

추론:

10px = 1rem 루트 요소(font-size = 10px인 경우);

20px = 루트 요소의 1rem(font-size = 20px인 경우)

40px = 루트 요소의 1rem(font-size) = 40px);

위의 두 예에서 첫 번째 케이스 버튼이 두 번째 버튼에 비례하여 확대되는 것을 발견했습니다. html 글꼴 크기가 변경되면 버튼의 크기도 변경됩니다. 버튼에 대해 이전에 설정한 너비와 높이를 변경할 필요가 없습니다. 사실 이것이 우리가 가장 보고 싶은 것입니다. 다음으로 예를 살펴보겠습니다.

Demo

위의 두 데모에서 우리는 html의 글꼴 크기를 변경하면 rem 단위를 사용하여 모든 요소를 ​​동일하게 변경할 수 있다는 것을 알고 있습니다. Chrome 브라우저의 디버깅 도구를 사용하여 다른 장치에서 세 번째 데모의 표시 효과를 전환하거나 브라우저 너비를 확대하여 효과를 확인하면 페이지 레이아웃이 해상도에 관계없이 동일한 것을 볼 수 있습니다. 동일한 비율로 전환하면 레이아웃이 지저분해지지 않습니다. js를 통해 브라우저의 현재 해상도에 따라 글꼴 크기 값을 변경하면 위의 효과를 얻을 수 있습니다. 페이지의 모든 요소는 어떤 방식으로도 변경할 필요가 없습니다.

이 시점에서 많은 사람들이 다양한 해상도에서 글꼴 크기 값을 계산하는 방법을 확실히 묻습니다.

먼저 위의 페이지 디자인 도안을 표준 사이즈인 640으로 줬다고 가정해보겠습니다. (물론 이 사이즈는 꼭 640일 필요는 없고 320, 480, 375일 수도 있습니다) 테이블 세트를 보려면

위 표의 파란색 열은 Demo3의 페이지 크기를 640으로 잘라낸 페이지입니다. 폭이 다른 글꼴? 표의 수치 변화를 보면 -site의 값을 이해할 수 있을 것입니다. 예: 384/640 = 0.6, 384는 640의 0.6배이므로 페이지 너비 384 아래의 글꼴 크기도 0.6배와 같습니다. 이때 글꼴 크기 384는 12px과 같습니다. . 다른 장치의 너비도 같은 방식으로 계산됩니다.

Demo3에서는 JS를 사용하여 루트 요소의 글꼴 크기를 동적으로 계산했습니다. 이것의 장점은 현재 Taobao 홈페이지에서 JS를 사용하여 계산합니다. 그러나 실제로는 JS 없이도 적응할 수 있습니다. 일반적으로 웹 앱을 만들 때 먼저 웹 사이트의 주류 화면 장치 수를 계산한 다음 해당 장치에 대한 미디어 쿼리 설정을 지정하여 적응을 수행합니다. 예를 들면 다음과 같습니다.

html  {
     font-size  :  20px ;
}
@media only screen and  ( min - width :  401px ) {
     html  {
         font-size:   25px  ! important ;
     }
}
@media only screen and  ( min - width :  428px ) {
     html  {
         font-size:   26.75px  ! important ;
     }
}
@media only screen and  ( min - width :  481px ) {
     html  {
         font-size:   30px  ! important ; 
     }
}
@media only screen and  ( min - width :  569px ) {
     html  {
         font-size:   35px  ! important ; 
     }
}
@media only screen and  ( min - width :  641px ) {
     html  {
         font-size:   40px  ! important ; 
     }
}

물론 위 설정을 모든 기기에 완전히 적용할 수는 없지만 JS를 사용하면 완전히 적용할 수 있습니다. 어느 것을 사용할지는 실제 작업 시나리오에 따라 다릅니다.

다음은 렘 기술을 사용하는 국내 모바일 사이트 2곳을 참고하시면 현재 모바일 타오바오 홈페이지만 렘을 사용하고 있으며, 네이티브 앱 홈페이지는 임베디드 웹앱 홈페이지입니다.

Taobao 홈페이지: m.taobao.com

D X: m.dx.com

마지막으로 호환성을 살펴보겠습니다.

더 많은 rem — 로우키 CSS 유닛 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!