HTML5 移動(dòng)頁(yè)面自適應(yīng)手機(jī)屏幕四類(lèi)方法總結(jié)

1、使用meta標(biāo)簽：viewport

H5移動(dòng)端頁(yè)面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。

 viewport 是用戶(hù)網(wǎng)頁(yè)的可視區(qū)域。翻譯為中文可以叫做"視區(qū)"。

手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的"窗口"（viewport）中，通常這個(gè)虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），用戶(hù)可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。 

viewport標(biāo)簽極其屬性：

每個(gè)屬性的詳細(xì)介紹：

2、使用css3單位rem

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em）,使用rem為元素設(shè)定字體大小時(shí)，是相對(duì)大小，但相對(duì)的只是HTML根元素。通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器多寫(xiě)一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。下面就是一個(gè)例子：

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

 默認(rèn)html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。

通常情況下，為了便于計(jì)算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個(gè)基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：

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

 具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過(guò)CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過(guò)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”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓?
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

3、使用媒體查詢(xún)

媒體查詢(xún)也是css3的方法，我們要解決的問(wèn)題是適應(yīng)手機(jī)屏幕，這個(gè)媒體查詢(xún)正是為解決這個(gè)問(wèn)題而生。

媒體查詢(xún)的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁(yè)面尺寸，設(shè)備屏幕尺寸等。

例如：如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍(lán)色：

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

4、使用百分比

百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是100%；

所以body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。