모바일 웹페이지 콘텐츠를 적응형으로 만드는 방법-HTML 튜토리얼-php.cn

모바일 웹페이지 콘텐츠를 적응형으로 만드는 방법

php中世界最好的语言

풀어 주다： 2018-01-23 10:34:01

원래의

2873명이 탐색했습니다.

이번에는 모바일 단말에서 웹 콘텐츠를 적응시키는 방법을 보여드리겠습니다. 모바일 단말에서 웹 콘텐츠를 적응시키는 방법에 대한 주의 사항은 무엇입니까?

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

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

• 먼저 페이지 크기가 넘치지 않고 화면을 채우도록 합니다. html 태그에 viewport를 추가하면 됩니다. 매개변수는 각각 페이지 너비 = 화면 너비입니다. 최대 및 최소 배율은 모두 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 설정 사용 시 원활한 연결이 이루어지지 못하는 문제를 완벽하게 해결합니다.

그러나 모바일 사파리는 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이 더 큰 글꼴 크기를 설정하면 블록 요소 내부의 인라인 요소 margin 및 padding에 추가 값이 발생합니다. 해결 방법은 외부 블록 요소의 글꼴 크기를 0으로 설정하는 것입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!