휴대폰 화면에 모바일 페이지 적응을 구현하는 HTML5 방법-H5 튜토리얼-php.cn

휴대폰 화면에 모바일 페이지 적응을 구현하는 HTML5 방법

小云云

풀어 주다： 2018-03-02 11:00:15

원래의

2581명이 탐색했습니다.

1. 메타 태그 사용: viewport

H5 모바일 페이지 적응에 일반적으로 사용되는 방법입니다. 이론적으로 이 태그를 사용하면 모든 화면 크기에 적용할 수 있지만 결과적으로 기기마다 이 태그에 대한 해석과 지원이 다릅니다. , 모든 브라우저나 시스템과 호환되지는 않습니다.

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

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

Viewport 태그 및 해당 속성:

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

로그인 후 복사

각 속성의 자세한 소개:

속성 이름	Value	Description
width	양의 정수 또는 장치 너비	정의 보기 뷰포트 너비(픽셀 단위)
height	양의 정수 또는 장치 높이	뷰포트 높이를 픽셀 단위로 정의합니다. 일반적으로 사용되지 않습니다
initial-scale	[0.0-10.0]	초기 스케일링 값을 정의하세요
minimum-scale	[0.0-10.0]	최소 스케일링을 정의하세요. 최대 스케일 설정보다 작거나 같아야 합니다
maximum-scale	[0.0 -10.0]	최소 배율 설정보다 크거나 같아야 하는 최대 확대/축소 비율을 정의합니다.
user-scalable	yes/no	사용자가 페이지를 수동으로 확대/축소할 수 있는지 여부를 정의합니다. 기본값은 yes입니다

2、使用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

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

로그인 후 복사

默认html的font-size是16px，即1rem=16px，如果某p宽度为32px你可以设为2rem。

通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：

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

로그인 후 복사

具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：

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

로그인 후 복사

3、使用媒体查询

媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：

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

로그인 후 복사

4、使用百分比

百分比指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；

所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。