HTML5 method to implement mobile page adaptation to mobile phone screen

1. Use the meta tag: viewport

A commonly used method for H5 mobile page adaptation. Theoretically speaking, using this tag can adapt to all screen sizes, but each device has different requirements. The different interpretation methods and support levels of tags result in incompatibility with all browsers or systems.

viewport is the visible area of ​​the user web page. Translated into Chinese, it can be called "view area".

Mobile browsers place the page in a virtual "window" (viewport). Usually this virtual "window" (viewport) is wider than the screen, so that each web page does not need to be squeezed into a small size. In a window (which would break the layout of webpages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the webpage.

Viewport tag and its attributes:

<meta>

Detailed introduction of each attribute:

##widthPositive integer or device-widthdefines the width of the viewport, The unit is pixelsheightPositive integer or device-heightdefines the height of the viewport, the unit is pixels, generally not usedinitial-scale[0.0-10.0]Define the initial scaling valueminimum-scale[0.0-10.0]Define the minimum scaling, it must be less than or equal to the maximum-scale settingmaximum-scale[ 0.0-10.0]Define the maximum zoom ratio, which must be greater than or equal to the minimum-scale settinguser-scalableyes/noDefine whether to allow users to manually zoom the page, the default value is 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>
   (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、使用百分比

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

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

相关推荐：

HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结

javascript - 如何让生成的div自适应手机屏幕

页面会自适应手机屏幕大小，在里面的图片不能

Attribute name	Value	Description

The above is the detailed content of HTML5 method to implement mobile page adaptation to mobile phone screen. For more information, please follow other related articles on the PHP Chinese website!