移動端頁面適配解決方案

1、流體佈局

所謂的流體佈局，就是用百分比來定義寬度，最外層容器的寬度設置爲100%，就能夠適配不一樣的屏幕，子元素按照比例來設置百分比，子元素總體的百分比之和就是100%，可是若是有子元素設置了邊框，或者padding，那麼總體的寬度就會大於100%，這時，咱們能夠將盒子的尺寸計算方式設置爲從邊框計算，經過設置：box-sizing:border-box，此時，盒子設置的寬度就是盒子的實際寬度，就沒有這個問題了。

寬度解決了，高度如何設置呢？通常的元素，高度能夠固定不變，因此在屏幕變化時，咱們能夠看到元素的寬度變了，高度不變，可是對於圖片，若是高度不一樣，圖片就會被拉扁，此時咱們能夠將圖片的寬度設爲100%；它的寬度就由它的父級的寬度決定，圖片的高度不設置，圖片就會按照寬度變化等比例放大或縮小，這是圖片的特性，這樣就能夠作到圖片的適配了。

示例以下：

  * {
       box-sizing: border-box;
    }

  .wrap {
       overflow: hidden;
    }

  .banner {
       overflow: hidden;
    }

  .banner img {
       width: 100%;
    }

  .l_con {
       width:33.333333%;
       height:50px;
       float: left;
    }
  .c_con {
       width:33.333333%;
       height:50px;
       float: left;
    }
   .r_con {
       width:33.333333%;
       height:50px;
       float: left;
    }

2、響應式佈局

響應式佈局，就是使用媒體查詢的方式，針對不一樣的屏幕，對應不一樣的樣式，可是移動端的屏幕不少種，若是要對應這麼多套不一樣的樣式，這樣作也不現實，因此針對移動端，能夠劃分出三個屏幕寬度範圍，在範圍以內的，就使用同一套樣式，這樣定義三套樣式就能夠了，寬度的區間能夠參照蘋果手機的分辨率：374px如下爲第一個區間，375px到413px爲第二個區間，414px以上爲第三個區間，按照這個三個區間定義三套樣式，在蘋果手機上能夠作到很好的適配，但對於一些其餘分辨率的手機，可能會有一些不太適配的細節，可是這三套，應該基本上是適用了。

示例以下：

/* 最小尺寸樣式 */
        ... ... 
        
/* 大於等於 375px 尺寸樣式 */
   @media screen and (min-width: 375px){
         ... ...
   }
        
/*大於等於 414px 尺寸樣式*/
  @media screen and (min-width: 414px){
        ... ...
  }

3、彈性盒子佈局模型

彈性盒子佈局模型是一個新增的CSS 佈局模塊，它帶有流體佈局和響應式佈局的一些特性，並且它用少許的屬性能夠實現了多個元素的對齊方式，分佈以及順序等問題，用它能快捷高效的實現適配多終端的佈局，這種模塊簡稱爲 flexbox，flexbox佈局模塊的前後有三個版本，前兩個版本的一些屬性在最新的瀏覽器上已經得不到支持了，第三個版本在最新的瀏覽器上已獲得普遍的支持。

Flexbox佈局模塊是CSS3新增的一些屬性，這些屬性分爲容器屬性和條目屬性，容器和條目是這種模塊裏面的概念，指的其實就是父元素和子元素。父元素經過設置display:flex來聲明flexbox模塊、經過flex-flow來設置子元素排列方式、經過justify-content來設置元素的分佈方式等等。而子元素經過flex屬性來設置伸長或縮小比例、經過order來設置它在容器中的順序等等。

示例以下：

.menu {
   max-width: 800px;
   height: 40px;
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.menu li {
   flex: 1;
}

4、基於rem的佈局

rem是CSS3新增的一個單位，相對於em單位，rem的單位設置更加簡單，它是相對於根元素的的字體大小，其餘的元素若是用rem來設置單位，它們對應的基準就是同樣的，這樣，在移動端適配中，除了html元素，其餘元素的寬、高、行高、背景定位等等都用rem來設置，咱們設定一個寬度做爲基準，好比320px，而後按照這個基準，按比例來調節不一樣屏幕上對應的html元素的字體大小，就能夠同步改變其餘全部元素的用rem設置的尺寸的大小，這樣就能夠作到真正的按比例適配，不像流體佈局，只能改變寬度，這種方式直接，高效，目前普遍應用在移動端佈局中。

動態改變html標籤文字大小的JavaScript以下：

(function () {
   let calc = function () {
       let docElement = document.documentElement;
       let clientWidthValue = docElement.clientWidth > 640 ? 640 : docElement.clientWidth;
       docElement.style.fontSize = 20 * (clientWidthValue / 320) + 'px';
   }
   calc();
   window.addEventListener('resize', calc);
})()

css 代碼設置以下：

.search{
   position: absolute;
   right:0.725rem;
   top:0.625rem;
   width:1.35rem;
   height:1.35rem;
   backgrond:url(../images/icons.png) left -31.97rem;
   -webkit-background-size: 2.9rem 33.5rem;
   background-size: 2.9rem 33.5rem;
}

在實際開發中，咱們能夠根據實際須要，選擇適合的適配方式。

本文原出處：http://pcedu.pconline.com.cn/1024/10241144.html