移動端頁面適配解決方案

標籤：等等   dde   移動端   設定   尺寸   決定   resize   動態改變   ems   

一、流體布局

所謂的流體布局，就是用百分比來定義寬度，最外層容器的寬度設定為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;    }

二、響應式布局

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

樣本如下：

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

三、彈性盒子布局模型

彈性盒子布局模型是一個新增的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;}

四、基於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

移動端頁面適配解決方案