오늘날에는 iPhone 시리즈는 물론이고 수많은 종류의 휴대폰이 있고 Android 휴대폰의 종류도 셀 수 없이 많기 때문에 모든 휴대폰에 대해 일련의 레이아웃 스타일을 작성하는 것은 불가능하지만 프런트엔드의 경우에도 마찬가지입니다. 점점 더 우수성을 위해 노력하고 있는 것은 물론 합리적인 해결책을 찾기 위해서라고 말했습니다. rem은 적응형 레이아웃에 사용됩니다.
적응을 통해 얻을 수 있는 효과는 다음과 같습니다(간단한 데모).
두 개의 div는 큰 화면이든 작은 화면이든 상관없이 화면의 절반을 차지합니다.
위의 간단한 백분율 사용은 가능하지만 백분율은 글꼴 적응을 달성할 수 없으며 백분율을 해당 크기로 변환하는 것은 여전히 어렵습니다. 다음으로 이번에는 주인공 렘 에 대해 이야기해보겠습니다. (보통 너비에만 적응합니다.)
렘 원리 분석우선 rem은 루트 요소의 글꼴 크기에 상대적인 단위입니다. 즉, 1rem은 html의 글꼴 크기 크기와 같습니다. 다음으로 html 요소의 글꼴 크기만 변경하면 됩니다. 렘의 크기 다음으로, 화면 너비가 클수록 1rem으로 표시되는 px 값이 커지고 HTML의 글꼴 크기가 커지는 것을 보장하는 한 어떻게 다른 화면에 적응할 수 있습니까? 화면 너비만큼.
몇 가지 개념에 대해 이야기해 보겠습니다. 장치 픽셀 비율 , 장치 물리적 픽셀 , 장치 독립적 픽셀 (가상 픽셀이라고도 함)
장치 픽셀 비율 = 장치 물리적 픽셀/장치 독립적 픽셀
기기의 물리적 픽셀: 기기에 표시되는 가장 작은 단위
장치 독립적 픽셀: 픽셀(CSS 크기)을 논리적으로 측정하는 데 사용되는 장치 독립적 단위입니다.
iphone6/7/8을 예로 들어 보겠습니다. iphone6/7/8의 물리적 픽셀은 750이며 이는 장치의 실제 크기이며 px는 장치의 독립적인 픽셀 단위입니다. 화면이고 CSS 크기가 375인 경우 장치 픽셀 비율은 장치가 공장에서 출고될 때 이미 설정되어 있습니다. 그렇다면 우리는 어떻게 적응을 달성할 수 있을까요?
이것은 가장 인기 있는 rem을 사용합니다.
렘 구현 계획먼저, 서로 다른 화면에 있는 장치의 물리적 픽셀에 따라 html 요소의 글꼴 크기를 사용하여 서로 다른 픽셀 크기를 설정해야 합니다.
1. 언론문의
html{font-size:16px;}@media 화면 및 (min-width:240px) { html {font-size:9px }}@media 화면 및 (min-width:320px) {html {font-size:12px; ;}}@미디어 화면 및 (최소 너비:375px) {html{font-size:14.0625px;}}@media screen 및 (min-width:XXX)를 사용하여 장치 크기를 확인한 다음 html의 글꼴 크기를 설정합니다.
2. js는 html의 글꼴 크기를 설정합니다(NetEase 솔루션)
function setRem() { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()위 코드는 디자인 초안으로 iphone6를 기준으로 한 결과 실제 픽셀은 1rem=100px입니다. 왜냐하면 iphone6의 기기 픽셀 비율이 2이기 때문에 브라우저 미리보기에서는 1rem이 50px이라는 뜻입니다. 1rem과 장치 너비의 관계는 7.5배이므로 장치 너비가 1rem만큼 변경되면 실제 크기는 변경되며 화면의 비율은 변경되지 않습니다. (시중에 나와있는 대부분의 솔루션이 이런 종류입니다.)
3. vw, vh를 사용하세요
html{글꼴 크기: 10vw}vw와 vh는 시각적 영역을 너비와 높이의 100부분으로 나누는 새로운 상대 단위입니다. 이 솔루션은 js 작성이 필요하지 않지만 호환성이 약간 떨어집니다.
아래 첨부된 내용은 vw 및 vh 호환성 표입니다.
각 rem은 루트 요소의 글꼴 크기에 상대적이므로 모든 노력은 장치 너비에 비례하여 루트 요소의 글꼴 크기를 설정하는 것입니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.