최근 모바일 단말에 가장 많이 사용되는 h5 반응형 솔루션은 rem 솔루션이다. 응답성을 얻으려면 루트 요소의 글꼴 크기를 계산해야 합니다.
그러나 이 솔루션에는 단점도 있습니다. 즉, 글꼴 크기가 정수가 아닌 경우 일부 글꼴은 rem 단위를 사용하므로 글꼴 표시 크기에 문제가 발생합니다. 이는 프로젝트의 프런트엔드 개발에 여전히 골치 아픈 문제입니다. 시각적 복원 요구 사항이 높습니다.
프런트 엔드 응답성을 해결하는 것은 다른 장치에서 정상적으로 표시할 수 있는 것 이상입니다. 여기서는 rem 메서드가 필요하지 않은 응답성 솔루션을 소개합니다. px를 직접 사용하세요. 여기서 이야기하는 것은 750px를 기반으로 한 디자인 초안입니다. 디자인 초안에서 몇 px로 측정하셨나요?
몇 px인지 직접 적어주세요. 이것은 매우 빠르며 rem 변환이 필요하지 않습니까?
여기서는 실제로 응답성을 달성하기 위해 페이지 크기를 조정하기 위해 변환의 배율을 사용합니다.
핵심 코드:
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page) let _scale = window.outerWidth/750; , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin) , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )) document.body.style.setProperty('visibility', 'visible ') }, 100); } screenMatch(); window.onresize = screenMatch;위 코드에서 id가 page인 노드는 전체 페이지 요소의 시작 노드이자 본문 아래의 첫 번째 요소입니다. 여기서 body/html은 min-height:100%;height:100%;를 설정해야 합니다.
실제로 미니 프로그램에서도 px 단위를 사용할 수 있지만 미니 프로그램에서 변환을 사용할 때 글꼴이 들쭉날쭉한 버그가 있을 수 있습니다. 마지막으로 호환성을 위해 Zoom 속성을 변경하고 -webkit-zoom을 사용했습니다. 핵심 코드는 h5와 크게 다르지 않습니다. 확대/축소 크기도 마찬가지입니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.