REM 상대 단위 사용 사례 공유

이번에는 REM 상대 단위 사용 사례를 공유하겠습니다. REM 상대 단위 사용 시 주의 사항은 무엇인가요? 다음은 실제 사례입니다.

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

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

<span style="font-size: 14px;">html{<br>    font-size:20px;<br>}<br>.btn {<br>    width: 6rem;<br>    height: 3rem;<br>    line-height: 3rem;<br>    font-size: 1.2rem;<br>    display: inline-block;<br>    background: #06c;<br>    color: #fff;<br>    border-radius: .5rem;<br>    text-decoration: none;<br>    text-align: center;    <br>}</span>

HTML에서 글꼴 크기의 크기를 변경하여 dom 요소의 글꼴 크기를 제어합니다.

다양한 해상도의 호환성에 적응하기 위해 HTML의 글꼴 크기는 js를 통해 동적으로 생성될 수 있으며 주류 모델의 경우 미디어 쿼리를 통해 설정할 수도 있습니다. 예를 들어 아래 코드는 미디어 쿼리에 대해 잘 모르는 경우 http://www.w3cplus.com/content/css3-media-queries

<span style="font-size: 14px;">html{font-size: 20px;}<br>@media only screen and (min-width: 320px){<br>    html{font-size: 20px !important;}<br>}<br>@media only screen and (min-width: 350px){<br>    html{font-size: 22.5px !important;}<br>}<br>@media only screen and (min-width: 365px){<br>    html{font-size: 23px !important;}<br>}<br>@media only screen and (min-width: 375px){<br>    html{font-size: 23.5px !important;}<br>}<br>@media only screen and (min-width: 390px){<br>    html{font-size: 24.5px !important;}<br>}<br>@media only screen and (min-width: 400px){<br>    html{font-size: 25px !important;}<br>}<br>@media only screen and (min-width: 428px){<br>    html{font-size: 26.8px !important;}<br>}<br>@media only screen and (min-width: 432px){<br>    html{font-size: 27.4px !important;}<br>}<br>@media only screen and (min-width: 481px){<br>    html{font-size: 30px !important;}<br>}<br>@media only screen and (min-width: 569px){<br>    html{font-size: 35px !important;}<br>}<br>@media only screen and (min-width: 641px){<br>    html{font-size: 40px !important;}<br>}</span>

를 공부하면 됩니다. HTML의 글꼴 크기, html { 글꼴 크기: 62.5% }와 같이 작성된 것을 볼 수도 있습니다. 이것은 주로 em과 px 사이의 변환을 용이하게 하기 위한 것입니다. em의 초기 값은 1em=16px입니다. 물론 이 경우에는 1.2em = 19.2px이지만 19.2px로 표시되는 크기는 거의 없습니다. 즉, px를 사용하여 크기를 표현하는 경우 값에 소수점 자리가 없습니다. body{font-size:가 설정된 경우 62.5%;}, 1em = 16px*62.5% = 10px, 1.2em = 12px, 이게 훨씬 더 간단하고 정확하지 않나요~~.

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!

추천 도서:

일반적으로 사용되는 코드 구성 요약

H5+Canvas 사용 사례에 대한 자세한 설명

위 내용은 REM 상대 단위 사용 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!