집 > 기사 > 웹 프론트엔드 > CSS에서 rem의 특징은 무엇입니까?

CSS에서 rem의 특징은 무엇입니까?

王林원래의: 2020-11-11 10:58:193275검색

CSS에서 rem의 특징은 rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대적인 크기이지만 [.b{font-size: 2rem /와 같이 HTML 루트 요소에 상대적입니다. /여기는 8px입니다;} ].

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3, 이 문서는 모든 브랜드의 컴퓨터에 적용됩니다.

rem: (루트 요소, 즉 HTML에 상대적)

rem은 CSS3의 새로운 상대적 단위입니다. 그것과 em의 차이점은 rem을 사용하여 요소의 글꼴 크기를 설정할 때입니다. 여전히 상대적인 크기이지만 HTML 루트 요소만 상대적입니다. 사용법은 매우 간단합니다. 루트 요소의 크기를 변경하여 값을 변경할 수 있습니다(rem과 em은 유사하지만 상대 요소는 다릅니다)

(동영상 공유 학습: java 동영상 튜토리얼)

px: (고정)

px는 픽셀(pixel)의 약자로 픽셀(pixel)을 의미하며 글꼴 크기와 요소의 너비와 높이를 지정할 때 사용됩니다. 픽셀은 모니터 화면 해상도에 상대적입니다.

em: (상위 요소에 상대적)

em은 현재 개체 내 텍스트의 글꼴 크기에 상대적인 상대적 길이 단위입니다. 현재 텍스트의 글꼴 크기를 설정하지 않으면 em은 브라우저의 기본 글꼴 크기를 기준으로 합니다

코드 예:

//em的值时相对于父元素，修改.a的大小，.b的大小会随之发生变化    
<style>
        .a{
            font-size: 4px;  //1em=4px
        }
        .b{
            font-size: 2rem;   //这里就8px;
        }
    </style>
</head>
<body>
    
    <div class="a">
        <p class="b">
            51515
        </p>
    </div>
 
</body>

CSS에서 rem의 특징은 무엇입니까?

관련 기사