HTML5實作行動頁面自適應手機螢幕的方法

1、使用meta標籤：viewport

H5行動端頁面自適應普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各設備對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。

viewport 是使用者網頁的視覺區域。翻譯為中文可以叫做"視區"。

手機瀏覽器是把頁面放在一個虛擬的"視窗"（viewport）中，通常這個虛擬的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器最佳化的網頁的佈局），使用者可以透過平移和縮放來看網頁的不同部分。

viewport標籤極度屬性：

<meta>

每個屬性的詳細介紹：

屬性名	#取值	描述
width	正整數或 device-width	定義視窗的寬度，單位為像素
height	正整數或 device-height	#定義視窗的高度，單位為像素，一般不用
initial-scale	[0.0-10.0]	定義初始縮放值
minimum-scale	[0.0-10.0]	定義縮小最小比例，它必須小於或等於maximum-scale設定
maximum-scale	#[ 0.0-10.0]	定義放大最大比例，它必須大於或等於minimum-scale設定
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>
   (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自适应手机屏幕

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

以上是HTML5實作行動頁面自適應手機螢幕的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！