CSS3의 REM 단위 사용법에 대한 자세한 설명(코드 예)
- 不言원래의
- 2018-11-07 10:50:134936검색
많은 웹사이트가 점점 더 다양한 장치에서 조정하기 어려운 픽셀 단위를 사용하고 있습니다. CSS3에서는 "root em"을 의미하는 REM 단위를 포함한 몇 가지 새로운 단위를 도입합니다. 이 문서에서 공유되는 내용은 REM 사용에 관한 것입니다. .
그럼 REM은 어떻게 사용하나요?
다음 CSS가 있다고 가정합니다.
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}먼저 모든 글꼴을 기준으로 px 크기를 결정해야 합니다. 편의상 최선을 다해 루트 글꼴 크기를 1px로 이렇게 만들었습니다.
CSS
html {font-size:1px;}두 번째로 나머지 글꼴 크기 값을 픽셀에서 rem 단위로 바꿔야 합니다.
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}REM이 수행하는 작업은 20REM을 루트 요소와 곱하는 것입니다.
20 REM * 1 PX = 20PX.
브라우저 지원
IE7 및 IE8은 여전히 PX 값을 사용해야 합니다. 이렇게 하면 글꼴 크기를 두 번(PX에 한 번, REM에 한 번) 써야 합니다.
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}예제는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{font-size:1px;}
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
article p{
font-size:12px;/*Support IE7 & IE8*/
font-size:12rem;
}
</style>
</head>
<body>
<section>
<article>
<h2>php中文网</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网1</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网2</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
</section>
</body>
</html>효과는 다음과 같습니다.
REM의 장점은 무엇인가요?
웹 사이트의 모든 글꼴을 20% 더 크게 만들어야 한다고 가정하면 다음과 같이 루트 요소의 글꼴 크기를 변경하기만 하면 됩니다.
html {font-size:1.2px;}글꼴 크기를 줄이려면 20%만큼, 다음을 수행해야 합니다.
html{font-size:0.8px;}반응형 디자인을 위한 REM
반응형 디자인의 중단점을 기반으로 모든 글꼴 크기를 변경하려는 경우 더 쉽습니다. 예를 참조하세요:
@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}}이제 작은 화면에서는 모든 글꼴의 크기를 40% 더 크게 조정할 수 있고 중간 화면에서는 20% 크기를 조정할 수 있습니다.
Less를 사용하여 콘텐츠를 두 번 작성해야 하는 문제를 해결하세요 - 이전 브라우저 지원을 위해
less 또는 sass에서는 두 번 작성하는 데 드는 모든 시간을 절약할 수 있는 기능을 추가할 수 있습니다.
더 적은 글꼴 크기 함수를 사용하여 호출할 수 있습니다.
.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
}컴파일된 CSS는 다음과 같습니다.
article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}위 내용은 CSS3의 REM 단위 사용법에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!