모바일 웹 페이지 크기 적응 구현 방법

드디어 프로젝트를 마치고 실종자가 돌아왔습니다! 프로젝트를 진행하면서 생각해볼 만한 점들을 많이 접하게 되었는데, 이에 대해 빠르게 설명드리겠습니다. 첫 번째 문제는 웹 페이지 크기 적응 문제입니다.

현재 더 일반적으로 사용되는 방법은 다음과 같습니다.

• 먼저 페이지 크기가 넘치지 않고 화면을 채우도록 만듭니다. . html 태그에 뷰포트만 추가하면 됩니다. 매개변수는 각각 페이지 너비 = 화면 너비입니다. 최대 및 최소 배율은 모두 1이며 사용자는 확대 또는 축소할 수 없습니다. 밖으로.

<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

• 백분율 적응: 길이 단위를 백분율로 변환하여 요소의 길이와 너비가 다양한 너비에 따라 그에 따라 변경됩니다.

장점: 폭 간 연결이 매끄럽고 비교적 조작이 쉽습니다.

단점: 글꼴 크기를 조정하려면 또 다른 적응형 방법 세트가 필요합니다. 화면 너비가 700px보다 큰 경우 계속해서 백분율을 기반으로 하면 요소가 너무 커져서 더 문제가 됩니다. 이때 조정합니다.

•rem, em 적응형: 미디어 쿼리 방법을 사용하여 다양한 화면 너비에서 또는 그런 다음 적응을 달성하기 위한 단위로 px 대신 rem과 em을 사용합니다.

장점: 다양한 화면 너비에 따라 설정할 수 있어 위에서 언급한 화면이 너무 클 때 발생하는 비율 문제를 완벽하게 해결할 수 있습니다. 글꼴 크기에도 문제가 없습니다.

단점: 폭 간격에 따라 설정되어 원활한 변환이 불가능합니다.

------------------------------- ------ ----------

이런 호환성 각각의 방법에는 장점과 단점이 있는데, 단점을 피하면서 장점을 어떻게 결합할 수 있습니까?

타오바오의 적응형 방식을 참고하다가 페이지의 글꼴 크기가 화면 너비와 설정된 글꼴 크기의 몫에 따라 자동으로 조정된다는 사실을 우연히 발견했습니다. 확실하다.

그래서 JS를 사용하여 화면 너비를 얻은 다음 고정된 비율에 따라 축소하고 이를 rem의 단위 길이로 사용하여 적응을 구현하는 것 같습니다.

이거 장점을 다 갖춘 솔루션이 아닐까요! ? 신나게 해주세요(☆_☆)

--------------------------------- -------------------------------------

JS 코드는 작성하기가 매우 간단하며 rem을 사용하여 원활한 연결을 설정하는 문제를 완벽하게 해결합니다.

그런데 모바일 단말기에서 테스트를 해보니 문제가 생겼습니다. 모바일 단말기의 Safari에서는 뷰포트에 따라 페이지 너비가 설정되기 전에 HTML이 로드되기 전에 JS를 매우 빠른 속도로 실행했습니다. 잘못된 너비로 인해 요소가 0^0보다 두 배 커집니다. 이 문제를 해결하려면 SetTimeout()을 사용해야 합니다.

------------------------------- ------ ----------

최종 코드

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

마지막으로 rem을 사용하는 적응 프로세스 중에 발견된 함정을 추가하고 싶습니다. html이 더 큰 글꼴 크기로 설정되면 내부 인라인 요소의 여백과 패딩이 발생합니다. 블록 요소에는 추가 값이 있습니다. 해결 방법은 외부 래핑된 블록 요소의 글꼴 크기를 0으로 설정하는 것입니다.

위의 모바일 웹 페이지 크기 적응 구현 방법에 대한 기사는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, 또한 PHP 중국어 웹사이트를 응원해 주시길 바랍니다.

모바일 단말기에서 적응형 웹 페이지 크기를 구현하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!