CSS3에서 rem을 사용하는 방법

rem은 html 요소 글꼴 크기 단위에 대한 상대 크기 값이며 구문 형식은 "요소:숫자 + rem"입니다. rem은 브라우저의 글꼴 크기를 변경하므로 웹 페이지의 레이아웃이 손상됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에는 상대 단위 rem이 추가되었습니다. rem을 사용하는 것은 상대 글꼴 크기 단위와 동일합니다. 더 직설적으로 말하면 루트 요소의 글꼴 크기 단위에 대한 상대 단위입니다. html 요소의 글꼴 크기에 상대적인 단위입니다.

장점: 하위 요소의 크기를 계산할 때 html 요소의 글꼴 크기만을 기준으로 계산하면 됩니다. 더 이상 em을 사용할 때와는 달리 자주 계산을 위해 상위 요소의 글꼴 크기를 찾기 위해 앞뒤로 이동해야 하며 계산기 없이는 전혀 할 수 없습니다.

rem은 단위입니다

CSS3의 출현으로 오늘날 rem이라고 부르는 단위를 포함하여 몇 가지 새로운 단위도 도입되었습니다. Rem은 W3C 공식 웹사이트에서 "루트 요소의 글꼴 크기"와 같이 설명되어 있습니다. 렘을 좀 더 자세히 살펴보자.

rem은 루트 요소 에 상대적입니다. 즉, 루트 요소에서 참조 값만 결정하고 루트 요소에서 글꼴 크기를 설정하면 됩니다. 이는 전적으로 사용자의 필요에 따라 결정될 수 있습니다. 아래 그림도 참고하세요:

간단한 예를 살펴보겠습니다.

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

저는 루트 요소 에 기본 글꼴 크기를 62.5%(즉, 10px)로 정의했습니다. 이 값을 설정합니다. 주로 계산을 용이하게 하기 위한 것입니다. 설정하지 않을 경우 "16px" 기준으로 적용됩니다. 위의 계산 결과에서 "rem"을 "px"처럼 편리하게 사용할 수 있으며 동시에 "px"와 "em"의 차이를 해결할 수 있습니다.

rem

사용하려면 먼저 다음 태그를 추가해야 합니다.

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

구체적인 의미는 다음과 같습니다.

initial-scale - 초기 배율 비율minimum-scale - 사용자가 확대/축소할 수 있는 최소 비율 maximum-scale - 사용자는

의 최대 비율로 확대한 다음 html의 글꼴 크기를 설정할 수 있습니다:

// resize 窗口大小发生改变的时候才会触发的，第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // 手机屏幕是否反转orientationchange
    window.addEventListener(resizeEvt, setFontSize, false); // IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false); //火狐
function setFontSize() {
    var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var basicNum = 200;
    var htmlFontSize = basicNum * (cWidth / 设计稿宽度);
    document.documentElement.style.fontSize = htmlFontSize + 'px';
}

일반 디자인 초안의 너비는 750입니다. 개발 과정에서는 iPhone6/7을 사용합니다. /8을 벤치마크로 사용하면 html의 글꼴 크기는 200 *(375/750)=100px로 계산되어야 하므로 디자인 초안에 너비가 200px인 상자가 있는 경우입니다. 너비를 (200/100)rem으로 설정해야 합니다. 따라서 계산하기 쉽기 때문에 basicNum을 200으로 설정하는 것이 좋습니다.

var htmlFontSize=basicNum*(cWidth/设计稿宽度);

화면 크기가 넓을수록 루트 html의 글꼴 크기가 커지는 것을 볼 수 있습니다. 다른 요소도 이를 기반으로 하므로 적응성이 있을 수 있습니다.

브라우저 호환성

rem은 CSS3에 새로 도입된 측정 단위입니다. 누구나 확실히 브라우저 지원에 대해 좌절감을 느끼고 걱정할 것입니다. 실제로 Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ 및 Opera11+와 같이 지원되는 브라우저가 꽤 많다는 사실에 놀라지 마세요.

단, 단위를 사용하여 글꼴을 설정할 때 IE를 완전히 무시할 수는 없습니다. 이 REM을 사용하고 싶지만 IE에서 효과와도 호환되기를 원한다면 "px"와 "rem"을 함께 사용하는 것을 고려해 볼 수 있습니다. IE6-8에서 효과를 얻으려면 "px"를 사용하고 브라우저의 효과를 얻으려면 "Rem"을 사용하십시오.

추천 학습:

css 비디오 튜토리얼

위 내용은 CSS3에서 rem을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!