移動頁面自適應手機屏幕寬度

網上關於這方面的文章有不少，重複的東西本文再也不贅述，僅提供思路，並解釋一些其餘文章講述模糊的地方。

 轉自:http://jingyan.baidu.com/article/656db918949b59e381249ce1.html

 

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

首先解釋該標籤的含義：

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

若是你徹底不瞭解這個標籤的使用須要先百度一下。

解釋：content中的「width」 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個備選：虛擬窗口的寬度、手機屏幕的寬度、仍是頁面的寬度等等？經試驗這個指的是虛擬窗口的寬度。瞭解寬度以後，對後續的各類scale，就應該知道是誰與誰的比例，是 虛擬窗口寬度 / 頁面寬度，這樣就會有問題出現安卓設備尺寸差別很大光主流的就有寬度爲 320 480 720 1080 等各類尺寸而以上標籤只能支持一種尺寸，固然有些瀏覽器會自動縮放使其適應屏幕，但這不是統一標準，正確的作法是用js動態生成此標籤，固然，應該先獲取屏幕尺寸。

對於此標籤還有如下須要分享：

1)、user-scalable=no就必定能夠保證頁面不能夠縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設爲1.0就能夠了。

2)、initial-scale=1.0   初始縮放比例受user-scalable控制嗎？不必定，有些瀏覽器會將user-scalable理解爲用戶手動縮放，若是user-scalable=no，initial-scale將沒法生效。

3)、手機頁面能夠觸摸移動，可是若是有須要禁止此操做，就是頁面寬度等於屏幕寬度是頁面正好適應屏幕才能夠保證頁面不能移動。

4)、若是頁面是通過縮小適應屏幕寬度的，會出現一個問題，當文本框被激活（獲取焦點）時，頁面會放大至原來尺寸。

以上是使用viewport標籤的一些小體會，分享給你們。

 

二、第二種自適應屏幕尺寸的方法是將頁面作成980寬度，在沒有viewport標籤的狀況下，移動設備屏幕範圍會顯示頁面980的寬度，若是頁面大於980，則在屏幕範圍內顯示頁面一部分，若是頁面小於980，則頁面居中兩側顯示空白，那麼你猜，若是頁面寬度等於980會出現什麼狀況呢？

 

三、百分比法，首先應明確一個概年，CSS中的百分比中的百指的是什麼，我告訴你指的是父元素，全部百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是百，子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那麼父元素的高是百。因此body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就能夠了，這隻適合佈局簡單的頁面，複雜的頁面實現很困難。

 

四、使用css3單位rem，有人這樣解釋rem，root-em，就是根部的em，想必em你們都懂的，那麼rem就是將根節點html的font-size的值做爲整個頁面的基準尺寸，默認html的font-size是16px，即1rem=16px，若是某div寬度爲32px你能夠設爲2rem。當咱們把html的font-size設爲20px時，1rem=20px，那麼32px=1.6rem了。到這裏咱們也就瞭解了rem的用法了，那麼怎麼用rem來實現不一樣尺寸屏幕的自適應呢？在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），二者的差異請自行查閱），假設寬度爲W，一個div在寬度爲640px的設計稿的下的寬度爲dW1，這樣若是html的font-size爲100px，那麼這個div的寬度用rem表示是多少呢？計算：div寬度dW2=dW1/100,px與rem之間很好換算，除以100就能夠，這是假定屏幕寬度爲640的，而不一樣寬度的屏幕怎麼處理，爲了能保證換算容易那就要爲html設置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

解釋一下爲何把100做爲一個縮放比例，用10或1不是更方便嗎，這是由於大多數瀏覽器font-size的最小值爲12px，因此只能用100了。

 

五、媒體查詢，媒體查詢也是css3的方法，咱們要解決的問題是適應手機屏幕，這個媒體查詢正是爲解決這個問題而生，媒體查詢的功能就是爲不一樣的媒體設置不一樣的css樣式，這裏的「媒體」包括頁面尺寸，設備屏幕尺寸等，好比咱們要爲寬度小於480px的頁面中的class="icon"的元素設置樣式，能夠這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};這裏僅介紹這種思路，關於媒體查詢的詳細用法請參閱css手冊。

 

 

  以前介紹一篇文章是：響應式web實戰總結 已經介紹了一些知識點，這裏就很少介紹了；咱們這邊來了解下如何使用媒體查詢寫不一樣的css樣式；針對響應式web設計開發，使用媒體查詢來適應不一樣的手機屏幕樣式開發時，咱們須要寫不一樣的樣式，爲此咱們來分享下我我的開發響應式web頁面的經驗；針對目前手機的獨立像素有320，360，384，400，還有iphone6+是414的獨立像素，所以咱們只須要針對目前這幾種匹配便可；以下:

1. 針對手機獨立像素是360 ~399等屏幕的寬度

     /*

      * 可是邊距 字體大小等仍是安裝360px來計算

      */

     @media (min-width:360px) and (max-width: 399px) {}

     2. 針對手機獨立像素是320~359之間的

     /* min-width:320px

      * 針對設備獨立像素爲320px 的css

      * min-width:320 和 max-width:359之間

      */

      @media (min-width: 320px) and (max-width:359px){}

      3. 針對設備獨立像素爲400px以上的樣式。

      /*

       * 針對設備獨立像素爲400px，邊距等等都按400px來計算

       */

      @media (min-width: 400px) and (max-width:450px){}

      4. 針對設備獨立像素爲640px ~ 999px的css

      /* min-width:640px

       * 針對設備獨立像素爲640px 的css

       * min-width:640 和 max-width:999之間

       * 邊距等按640px來計算

       */

      @media (min-width: 640px) and (max-width:999px){}

      5. 可是在PC端，咱們爲了適應PC端，因此針對寬度爲1000以上也作一個顯示處理。

     /* 最小寬度1000樣式

      *爲了適應PC端 因此PC端在設計時候 默認以1000px來設計的

      */

     @media screen and (min-width:1000px) {}

一：使用rem來設置字體

       爲了方便計算字體，咱們來設置瀏覽器10px，咱們都知道瀏覽器默認的像素是16px，所以咱們須要對html{font-size:62.5%;} // 10 / 16 = 62.5%;

首先假如設計搞在移動端上是按照750px設計稿上的話，假如字體在750px下字體大小咱們使用rem來寫大小；那麼他們的字體大小在各個獨立像素下以下計算：

1. 針對設備獨立像素爲640px ~ 999px的css

      @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

            html{font-size: 53.42%;}  /*62.5% / 1.17 */

      }

     @media (min-width: 400px) and (max-width:450px){

          /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

      }

      @media (min-width:360px) and (max-width: 399px) {

           /*  750 / 360 = 2.08 */

          html{font-size:30%}   /* 62.5% / 2.08  */

      }

     @media (min-width: 320px) and (max-width:359px){

          /*  750/320 = 2.34 */

         html{font-size: 26.7%}  /* 62.5 / 2.34 */

     }

二： 針對寬度，高度，background-size, margin及padding的計算方法；

     假如在750px下的寬度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;

     針對設備獨立像素爲640px ~ 999px的css

     @media (min-width:640px) and (max-width: 999px) {

           /* 750/640 = 1.17*/

           html{font-size: 53.42%;}  /*62.5% / 1.17 */

           // 下面的屬性都是 自己的像素 / 1.17 得來的

         width: 112.82px;      // 132 / 1.17

         height:112.82px;      // 132 / 1.17

         background-size:112.82px 112.82px;  // 132 / 1.17

         margin:17.09px;   // 20 / 1.17

         padding:17.09px;  // 20 / 1.17

     }

    @media (min-width: 400px) and (max-width:450px){

         /*  750 / 400 = 1.875 */

         html{font-size:33.33% } /* 62.5% / 1.875 */

         // 下面的屬性都是 自己的像素 / 1.875 得來的

         width: 70.4px;      // 132 / 1.875

         height: 70.4px;      // 132 / 1.875

         background-size: 70.4px 70.4px;  // 132 / 1.875

         margin:10.67px;   // 20 / 1.875

         padding: 10.67px;  // 20 / 1.875

    }

   @media (min-width:360px) and (max-width: 399px) {

          /*  750 / 360 = 2.08 */

         html{font-size:30%}   /* 62.5% / 2.08  */

         // 下面的屬性都是 自己的像素 / 2.08 得來的

         width: 63.46px;      // 132 / 2.08

         height: 63.46px;      // 132 / 2.08

         background-size: 63.46px  63.46px;  // 132 / 2.08

         margin:9.62px;   // 20 / 2.08

         padding: 9.62px;  // 20 / 2.08

    }

   @media (min-width: 320px) and (max-width:359px){

         /*  750/320 = 2.34 */

        html{font-size: 26.7%}  /* 62.5 / 2.34 */

        width: 56.41px;      // 132 / 2.34

        height: 56.41px;      // 132 / 2.34

        background-size: 56.41px  56.41px;  // 132 / 2.34

        margin:8.55px;   // 20 / 2.34

        padding: 8.55px;  // 20 / 2.34

   }

可是有時候在小屏幕下字體過小了，使用戶看起來太吃力，咱們能夠針對小屏幕下適當掉大一點便可；