집 > 기사 > 웹 프론트엔드 > html5 모바일 페이지는 화면에 어떻게 적응하나요? HTML5 페이지를 휴대폰 화면에 맞게 조정하는 네 가지 방법

html5 모바일 페이지는 화면에 어떻게 적응하나요? HTML5 페이지를 휴대폰 화면에 맞게 조정하는 네 가지 방법

不言원래의: 2018-08-20 13:48:356036검색

이 문서의 내용은 CSS3에서 background-orgin을 사용하는 방법(코드 포함)에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 메타 태그 사용: viewport

H5 모바일 페이지 적응은 일반적으로 사용되는 방법입니다. 태그 모든 크기의 화면에 적합하지만, 기기마다 태그를 다르게 해석하고 지원하므로 모든 브라우저나 시스템과 호환되지 않습니다.

viewport는 사용자 웹페이지의 보이는 영역입니다. 중국어로 번역하면 "뷰 영역"이라고 할 수 있습니다.

모바일 브라우저는 페이지를 가상 "창"(뷰포트)에 배치합니다. 일반적으로 이 가상 "창"(뷰포트)은 화면보다 넓으므로 각 웹페이지를 In으로 압축할 필요가 없습니다. 매우 작은 창(모바일 브라우저에 최적화되지 않은 페이지의 레이아웃을 손상시킬 수 있음)을 사용하면 사용자가 페이지의 다른 부분을 보기 위해 이동 및 확대/축소할 수 있습니다.

viewport 태그 및 속성:

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

각 속성의 자세한 소개:

속성 이름	가치	설명
너비	양의 정수 또는 장치 너비	뷰포트 너비를 픽셀 단위로 정의
키	양의 정수 또는 장치 높이	뷰포트의 높이를 픽셀 단위로 정의합니다. 일반적으로 정의하지 않습니다.
초기 규모	[0.0-10.0]	초기 스케일링 값 정의
최소 규모	[0.0-10.0]	최대 배율 설정보다 작거나 같아야 하는 최소 축소 비율을 정의합니다.
최대 규모	[0.0-10.0]	최대 배율을 정의합니다. 이는 최소 배율 설정보다 크거나 같아야 합니다.
사용자 확장 가능	예/아니요	사용자가 페이지를 수동으로 확대/축소할 수 있도록 허용할지 정의합니다. 기본값은 yes입니다

2. css3 단위 rem

rem은 CSS3의 새로운 상대 단위입니다(루트 em , 루트 em) rem을 사용하여 요소의 글꼴 크기를 설정하는 경우 상대적 크기이지만 HTML 루트 요소에만 상대적입니다. 이를 통해 루트 요소만 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며 글꼴 크기를 레이어별로 합성하는 연쇄 반응을 피할 수 있습니다.

현재 IE8 이하 버전을 제외한 모든 브라우저는 rem을 지원합니다. 이를 지원하지 않는 브라우저의 경우 절대 단위 선언을 추가로 작성하세요. 이러한 브라우저는 rem으로 설정된 글꼴 크기를 무시합니다. 예를 들면 다음과 같습니다.

p {font-size:14px; font-size:.875rem;}

HTML의 기본 글꼴 크기는 16px, 즉 1rem=16px입니다. p의 너비가 32px인 경우 2rem으로 설정할 수 있습니다.

일반적으로 값 계산을 용이하게 하기 위해 기본 10px인 62.5%를 기준으로 사용합니다. 물론, 이 기반은 특정 상황에 따라 어떤 값이라도 될 수 있습니다. 설정 방법은 다음과 같습니다.

Html{font-size:62.5%(10/16*100%)}

다른 화면에서의 규칙의 구체적인 정의, 즉 기준을 정의하는 방법: CSS를 통해 정의할 수 있으며, 다른 기준 값을 지정할 수 있습니다. 물론, 이 메서드는 js를 통해 한 번 정의할 수도 있습니다.

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
    })(document, window);
</script>

3. 미디어 쿼리

#🎜🎜를 사용하세요. #미디어 쿼리도 CSS3 방식입니다. 우리가 해결해야 할 문제는 휴대폰 화면에 적응하는 것입니다. 이 미디어 쿼리는 이 문제를 해결하기 위해 만들어졌습니다.

미디어 쿼리의 기능은 다양한 미디어에 대해 다양한 CSS 스타일을 설정하는 것입니다. 여기서 "미디어"에는 페이지 크기, 기기 화면 크기 등이 포함됩니다.

예: 브라우저 창이 500px보다 작으면 배경이 연한 파란색이 됩니다.

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

4, 백분율 사용 #🎜 🎜# Percentage는 상위 요소를 의미하며, 모든 백분율은 이와 같습니다. 하위 요소의 너비가 50%이면 상위 요소의 너비는 100%입니다.

따라서 본문의 기본 너비는 화면 너비입니다(PC에서는 브라우저를 나타냅니다. 너비). 하위 요소는 백분율로 배치됩니다(또는 크기를 지정합니다). 이는 단순한 레이아웃이 있는 페이지에만 적합합니다.

html5 모바일 페이지는 화면에 어떻게 적응하나요? HTML5 페이지를 휴대폰 화면에 맞게 조정하는 네 가지 방법

관련 기사