px 단위 html5 반응형 솔루션에 대한 자세한 설명-CSS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-03-12 10:03:05

원래의

1482명이 탐색했습니다.

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

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

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

핵심 코드:

let screenMatch = () => {
            document.body.style.setProperty(&#39;visibility&#39;, &#39;hidden&#39;)
            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(&#39;visibility&#39;, &#39;visible&#39;)
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

로그인 후 복사

위 코드에서 페이지 ID가 있는 노드는 전체 페이지 요소의 시작 노드이자 본문 아래 첫 번째 요소입니다. 여기서 body/html은 min-height:100%;height:100%;

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