HTML5 移動頁面自適應手機屏幕四類方法

 

 一、使用meta標籤：viewport

H5移動端頁面自適應廣泛使用的方法，理論上講使用這個標籤是能夠適應全部尺寸的屏幕的，可是各設備對該標籤的解釋方式及支持程度不一樣形成了不能兼容全部瀏覽器或系統。

viewport 是用戶網頁的可視區域。翻譯爲中文能夠叫作"視區"。

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

viewport標籤極其屬性：

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

 

每一個屬性的詳細介紹：

        

屬性名

      

取值

   

描述

  
   

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

二、使用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，若是某div寬度爲32px你能夠設爲2rem。

一般狀況下，爲了便於計算數值則使用62.5%，即默認的10px做爲基數。固然這個基數能夠爲任何數值，視具體狀況而定。設置方法以下：

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

+434623999羣交流學習，領取資料

具體不一樣屏幕下的規則定義，即基數的定義方式：能夠經過CSS定義，不一樣寬度範圍裏定義不一樣的基數值，固然也能夠經過js一次定義方法以下：

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

<script type="text/javascript">

   (function(doc, win) {

      vardocEl = doc.documentElement,

        resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function (){

          varclientWidth = 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>
 

+434623999羣交流學習，領取資料

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

三、使用媒體查詢

媒體查詢也是css3的方法，咱們要解決的問題是適應手機屏幕，這個媒體查詢正是爲解決這個問題而生。

媒體查詢的功能就是爲不一樣的媒體設置不一樣的css樣式，這裏的「媒體」包括頁面尺寸，設備屏幕尺寸等。

例如：若是瀏覽器窗口小於 500px, 背景將變爲淺藍色：

@media only screen and (max-width: 500px) {

    body {

        background-color:lightblue;

    }

}

四、使用百分比

百分比指的是父元素，全部百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是100%；

因此body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就能夠了，這隻適合佈局簡單的頁面，複雜的頁面實現很困難。

+434623999羣交流學習，領取資料