CSS에서 렘이란 무엇입니까?

CSS의 rem은 CSS 단위입니다. rem의 전체 영어 이름은 "루트 요소의 글꼴 크기"입니다. 이는 루트 요소에 대한 글꼴 크기의 단위를 나타내고 em은 글꼴 크기의 단위를 나타냅니다. 상위 요소를 기준으로 합니다.

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

추천: "css 동영상 튜토리얼"

rem은 지난 1~2년 사이에 인기가 높아지기 시작한 은밀한 CSS 유닛입니다. 많은 학생들이 rem을 사용해보려고 합니다. 일부는 그것을 사용하는 중 함정에 부딪혔을 때 버려졌습니다. 하지만 rem에 대한 나의 전반적인 평가는 확실히 웹 앱을 만드는 데 가장 적합한 후보 중 하나라는 것입니다.

렘이 뭐예요?

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

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

여기서는 웹 앱과 웹 페이지에서 rem을 사용할 수 없다는 점을 특히 강조합니다. 물론 가능하지만 호환성 때문에 웹 앱에서 rem을 사용하면 이 장치의 가치와 기능을 더 잘 강조할 수 있습니다. . 현재 일부 회사에서는 웹 앱에 화면 적응을 어떻게 구현합니까?

1. 강력한 화면 적응 레이아웃 달성:

최근 iPhone 6가 두 가지 크기의 휴대폰으로 출시되면서 모바일 화면 유형에 더욱 혼란이 생겼습니다. 1년에 한 가지 웹 앱을 만드는 방법이 기억납니다. 또는 두 번째는 320 너비를 사용하는 것입니다. 표준에 적응하기 위해 320 사양에서는 여전히 320을 초과하는 크기가 표시됩니다. 이러한 구현 방법은 Taobao 웹 앱으로 표시됩니다. 그러나 최근 모바일 Taobao 홈페이지가 개정되어 렘 단위가 변경되었습니다. 홈페이지는 여전히 그대로이며 페이지 너비가 고정되어 있고 페이지 레이아웃이 유동적이어서 이전과 동일한 혼란이 있었습니다.

페이지 레이아웃을 자를 때 일반적으로 사용되는 단위는 절대 단위인 px입니다. 웹 앱 화면 적응에는 유동적 레이아웃, 제한된 너비, 반응성 등 여러 가지 방법이 있지만 이러한 옵션은 그렇지 않습니다. 최고의 솔루션.

예를 들어 유동 레이아웃 솔루션은 다양한 화면에 적응할 수 있지만 몇 가지 크기의 휴대폰에서만 시각적 디자이너를 완벽하게 표시할 수 있고 가장 원하는 효과는 상호 작용이기 때문에 표시 효과가 매우 열악합니다. 하지만 업계에는 여전히 웹 앱을 자르기 위해 스트리밍 레이아웃을 사용하는 회사가 꽤 있습니다. 아래에서 수집한 사례를 살펴보세요.

1.Amazon

2.Lanting

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

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

2. 고정 너비 방식

초기에는 일부 웹사이트에서 페이지 너비를 320으로 설정하고 남는 부분을 비워 두는 방식이 있었습니다. 전통적인 레이아웃은 디자인 영감을 제한하며 프런트 엔드는 기만적인 유동 레이아웃에 참여할 필요가 없습니다. 그러나 이 솔루션에는 몇 가지 문제점이 있습니다. 예를 들어 대형 화면 휴대폰에서는 양쪽에 공백이 있습니다. 또 다른 하나는 대형 화면 휴대폰에서는 페이지가 매우 작게 보이고 조작 버튼도 매우 작다는 것입니다. . 모바일 타오바오 홈페이지는 처음에는 이렇게 생겼으나, 최근 rem을 사용하여 개정되었습니다.

3. 반응형 접근 방식

이 접근 방식은 중국 대기업의 복잡한 웹사이트용 모바일 단말기에서는 거의 사용되지 않습니다. 주된 이유는 작업 규모가 크고 유지 관리가 어렵기 때문에 일반적으로 중소 규모의 포털이나 블로그 사이트에서는 반응형 방식을 사용하여 웹 페이지에서 웹 앱으로 한 단계로 직접 이동할 수 있습니다. 이렇게 하면 비용을 절감할 수 있고 자체 웹 사이트용으로 특별히 웹 앱 버전을 만들 필요가 없기 때문입니다.

4.확대/축소를 위한 뷰포트 설정

티몰 웹앱 홈페이지는 이렇게 제작되었습니다. 너비 320을 기준으로 확장이 가능합니다. 최대 확장은 320*1.3 = 416입니다. 기본적으로 416으로 확장하면 iPhone6 ​​plus 화면과 호환 가능합니다. 이 방법은 간단하고 조악하며 효율적입니다. 솔직히 말해서 rem을 사용할 때 매우 효율적이라고 생각합니다. 이에 대해서는 다음에 설명하겠습니다. 그러나 일부 학생들은 크기 조정으로 인해 사용 중에 일부 페이지 요소가 흐려진다고 보고했습니다.

rem은 모든 화면에 동일하게 적응할 수 있습니다

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

위에서 언급한 것처럼 rem은 루트 요소를 통해 적용됩니다. 웹 페이지의 루트 요소는 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;
}

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

위의 너비와 height는 위의 결과가 됩니다. 두 번, 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의 변경이 발생함을 발견했습니다. 글꼴 크기는 버튼의 크기가 변경될 때 이전에 버튼에 설정한 너비와 높이를 변경할 필요가 없습니다. 사실 이것이 우리가 가장 보고 싶은 것입니다. 다음으로 예를 살펴보겠습니다.

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

여기 다양한 해상도에서 글꼴 크기 값을 계산하는 방법을 묻는 사람들이 많을 텐데요.

우선 위의 페이지 디자인 시안을 보시고 표준 사이즈인 640으로 주셨다고 가정하고 보겠습니다. 375) 그룹 테이블.

위 표의 파란색 열은 Demo3의 페이지 크기입니다. 페이지는 너비 640으로 잘라졌습니다. 다양한 너비에서 글꼴 사이트 값을 계산하는 방법을 보면 알 수 있을 것입니다. 테이블의 수치 변화. 예: 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를 사용하면 완벽하게 적용할 수 있습니다. 어느 것을 사용할지는 실제 작업 시나리오에 따라 다릅니다.

아래에서는 렘 기술을 사용하는 국내 모바일 사이트 두 곳을 추천해드리며, 현재는 모바일 타오바오 홈페이지에서만 렘을 사용하고 있으며, 타오바오 네이티브 앱 홈페이지는 임베디드 웹앱 홈페이지입니다.

타오바오 홈페이지: m.taobao.com

D X: m.dx.com

위 내용은 CSS에서 렘이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!