집 > 기사 > 웹 프론트엔드 > html과 css를 결합하여 모바일 웹페이지에 대한 적응형 코드 구현

html과 css를 결합하여 모바일 웹페이지에 대한 적응형 코드 구현

不言원래의: 2018-08-10 17:34:518631검색

이 글의 내용은 모바일 웹 페이지 적응을 구현하기 위해 HTML과 CSS를 결합한 코드에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 저는 최근 적응 문제를 중심으로 모바일 웹 페이지를 작성하는 프로젝트를 진행하고 있습니다. 부트스트랩이나 다른 프론트엔드 프레임워크를 잘 사용하지 않고, 시간을 낭비하고 싶지 않다면 적응하지 못하는 것이 귀찮습니다. 여기서는 제 방법을 소개하겠습니다.

또한 많은 사람들의 방법을 결합합니다. 아이디어.

1. 헤드에 다음 코드를 추가하세요:

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

이 문장은 자동으로 확대/축소를 설정하는 것입니다. 그러나 모든 휴대폰에 완벽하게 적용되는 것은 아니며, 브라우저 모바일 모드를 사용하는 경우에는 정상일 수 있습니다. 디버깅은 되지만, 실제로 실제 휴대폰으로 전환하는 것은 비정상적입니다. 그래서 우리는 여전히 변화를 가해야 합니다.

2. magin, padding,font-size 및 기타 속성을 사용할 때는 px 대신 rem을 사용하는 것이 좋습니다. 여기서는 직접 가져올 수 있는 js 코드를 제공합니다. 얽매임 없이 렘이란? 원리에 관해서는 또 다른 블로그에 써서 사용법을 설명하겠습니다. 웹페이지 작성시 html에 넣을 수 있는 다음의 js코드입니다. 아래 코드의 640은 휴대폰의 화면 너비를 의미합니다. 일반적으로 시중에서 판매되는 휴대폰 화면의 최대 너비는 640px이므로 여기서는 화면의 최대 너비를 나타내기 위해 i=640을 사용합니다. 최소값은 320px이고 다음 js를 인용하여 자신만의 웹 페이지를 작성할 수 있습니다. 이 js에서 1rem=100px는 실제로 쉽게 변환하기 위한 것임을 기억하세요.

<script>
!function(n) {
    var e = n.document,
    t = e.documentElement,
    i = 640,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange": "resize",
    a = function() {
        var n = t.clientWidth || 320;
        n > 640 && (n = 640),
        t.style.fontSize = n / d + "px"
    };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>

3. 설명을 위해 캐러셀 효과를 보여드리겠습니다. 코드부터 시작해 보겠습니다.





<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
无标题文档

html과 css를 결합하여 모바일 웹페이지에 대한 적응형 코드 구현

관련 기사