px 단위 html5 반응형 솔루션에 대한 자세한 설명

최근 가장 많이 활용되고 있는 모바일 h5 반응형 솔루션은 렘(rem) 솔루션입니다. 응답성을 얻으려면 루트 요소의 글꼴 크기를 계산해야 합니다. 이번 글에서는 px 단위 HTML5 반응형 솔루션 관련 정보를 주로 소개하여 도움이 되기를 바랍니다.

그러나 이 솔루션에는 단점도 있습니다. 즉, 글꼴 크기가 정수가 아닌 경우 일부 글꼴은 rem 단위를 사용하므로 시각적 복원 요구 사항이 상대적으로 높은 프로젝트의 경우 글꼴 표시 크기에 문제가 발생합니다. 이것은 프론트엔드 개발에서는 여전히 매우 어렵습니다.

프런트 엔드 응답성을 해결하는 것은 다른 장치에서 정상적으로 표시하는 것 이상입니다. 여기서는 rem 메서드가 필요하지 않은 반응형 솔루션을 소개합니다. px를 직접 사용하세요. 여기서 이야기하는 것은 750px를 기반으로 한 디자인 초안입니다. 디자인 초안에서 몇 px로 측정하시나요? 스타일에 몇 px를 직접 적어주세요. 이것은 매우 빠르며 rem 변환이 필요하지 않습니까?

transform
transform-origin
여기에서는 실제로 반응성을 달성하기 위해 페이지 크기를 조정하기 위해 변환 규모를 사용합니다.

핵심 코드:

let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page");
            let _scale = window.outerWidth/750;
            
            page.style.setProperty("transformOrigin", "0 0");
            page.style.setProperty("transform", "scale("+ _scale + ")");
            //兼容ios8
            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 + ")");
                //兼容ios8
                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가 있는 노드는 전체 페이지 요소의 시작 노드이자 본문 아래 첫 번째 요소입니다. 여기서 body/html은 min-height:100%;height:100%;

실제로 미니 프로그램에서 px 단위를 사용할 수도 있지만 미니 프로그램에서 변환을 사용할 때 글꼴이 들쭉날쭉한 버그가 있을 수 있습니다. 마지막으로 Zoom 속성을 추가하고 호환성을 위해 -webkit-zoom을 사용하세요. 핵심 코드는 h5와 크게 다르지 않습니다. 확대/축소 크기도 마찬가지입니다.

관련 추천 :

HTML5 반응형 배너 제작 튜토리얼

구공게 구현을 위한 HTML5 반응형 디자인의 샘플 코드에 대한 자세한 소개(그림)

Top Ten HTML5 Responsive Framework_html/css_WEB-ITnose

위 내용은 px 단위 html5 반응형 솔루션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!