REM (도로 요소의 글꼴 크기)은 루트 요소의 글꼴 크기 (즉, HTML 요소)의 단위 크기를 나타냅니다.
루트 요소의 글꼴 크기가 10px라고 가정하고 5REM의 크기는 5*10 = 50px입니다.
html {font-size : 10px;} p {width : 2*10 = 20px;* / margin;} 적응하려면 rem과거에는 종종 페이지를 수행합니다. 뷰포트 너비는 장치 범위로 설정된 다음 호환 장치의 최소 너비 (보통 320px)를 선택합니다. 이 최소 너비를 기준으로 페이지를 만듭니다. 이 장치는 PX와 백분율을 사용합니다. 너비가 다른 장치에서는 페이지의 글꼴 크기와 내용이 동일합니다. 따라서 이것의 단점은 일부 크기의 장비에 표시된 페이지의 효과가 효과적이지 않다는 것입니다.
페이지에 REM을 사용하는 경우 다른 장치 너비에 따라 루트 요소에 다른 글꼴 크기를 설정합니다. 너비가 더 넓을수록 글꼴이 클수록. 그런 다음 REM을 사용하여 PX를 원래 사용하는 장소를 교체하십시오. 이런 식으로 글꼴의 크기, 컨텐츠의 크기 및 화면 너비가 커짐에 따라 클수록 더 커집니다.
우선, JS는 HTML의 기본 글꼴 크기를 설정했습니다 (HTML 헤드로 작성)
<script type = text/javaScript> var bodylement = document.documentElement.body, rc = {w : 750, h : 1206}, // document.d.d.d.d.d.d.d ocmeentlement. ClientWidth |. , currentsize = parsefloat ((gc.w / gc.h) .tofixed (1)), lasthtmlsize = 16, // 기본값은 html 기본값이 16px html = documeelelemelemelementsbytagname (ht ml)이기 때문입니다 ) {// long -screen lasthtmlsize = 16;} else if (권한 자리 <currentsize) {// wide -screen lasthtmlsize = (rc.h/ gc.h * gc.w)/ rc.w 16;} html.style .fontsize = gc.w / lasthtmlsize + 'px';} setfontsize ();SCSS 파일 PX를 유지하도록 설정하십시오
// 기본 16은 HTML 기본 글꼴 크기입니다. // 기본 750은 디자인 원고의 기본 너비입니다.
편리한 호출의 기능 편집 :
@function getTop ($ n) {@return ($ n -1206 /2) /(750 /16)+rem;}} @function getleft ($ n) {@return ($ n -750 /2) /(750 / / / 16)+rem;}@function getright ($ n) {@return (($ n -750) / 2) / (750 / 16)+rem;}@mixin center ($ left, $ top) { / / 위치의 중간 : 왼쪽; : 50%; 50%; 상단 : 50%; gettop ($ top) getright ($)@Mixin Middlert ($, $ top) {// 居 居 r r r r r r : right; : 50%; gettop ($ top) 0 0;}@왼쪽 : // 왼쪽; 0 getLeft ($ 왼쪽)}@왼쪽, $ top) {// 왼쪽 : rem ($ 왼쪽);}@mixin 오른쪽 ($ wright) {// 위치 : REM ($ top) {// 위치; 하단 : rem ($ bottom);}위의 함수를 호출하십시오 (PS 볼륨의 실제 거리를 사용할 수 있고 기본 설계 초안 너비는 750).
.page1-img1 {폭 : rem (173);위는이 기사의 모든 내용입니다.