移動端適配方案總結

前言

最近公司在考慮將原有的pc端項目改形成移動端適配項目 但願能在代價最低的前提下完成改造 因而我開始進行了一些方案的調研 現記錄下來

• 自適應網站

響應式網站，h5網站，寬屏網站，這些均可以稱爲自適應網站，簡單的說就是一個網站能夠兼容不一樣的終端，好比：電腦、ipad、手機等。不須要爲每一個設備製做一個版本的網站，網站自動識別、兼容，完成電腦網站，自動擁有手機網站、微網站。同時電腦網站、手機網站、微網站統一後臺、數據同步，便於管理。

常見的處理方案

1.media queries(媒體查詢) 這套方案估計你們都比較熟悉了 主要就是運用css來判斷設備寬度在不一樣的區間運用不一樣的樣式 個性化定製會比較高 這裏看一下例子 pc端

移動端

2.rem

rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位，rem計算的規則是依賴根元素。原理是先按定高寬設計出來頁面，而後轉換爲rem單位，配合js查詢屏幕大小來改變html的font-size 這邊你們能夠看看淘寶和網易的作法

segmentfault.com/a/119000001…

下面的例子這是單純使用rem佈局來達到自適應 字體寬高 邊距等所有使用rem代替px

3.flex或者百分比佈局

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。 通常移動端瀏覽器對flex支持都比較好 因此不少佈局思路會使用彈性盒子佈局 能夠結合百分比佈局來實現想要的效果

這邊你們能夠參考移動端flex自適應佈局

blog.csdn.net/qq_34648000…

下面的例子是局部使用flex來達到頁面某些元素自適應 其實整個頁面還包含了rem和媒體查詢

4.viewport

viewprot 指的是移動設備瀏覽器中放置頁面的一個虛擬的窗口，該窗口可大於或小於移動設備的可視區域。當咱們將一個pc端的網頁放到移動端的時候，移動端瀏覽器會將pc端的網頁按照必定的比例完整的顯示出來，這是由於移動端的瀏覽器默認的會將網頁渲染在一個比例比較大的viewport中排版（ios默認的是980px，Android4.0以上爲980px），而後經過比例縮放看到整個頁面的全貌。

爲何要把viewport放在最後寫呢 由於若是咱們作自適應網站基本都要在頁面head裏面加上一個meta標籤。這段代碼意思就是讓viewport的寬度等於物理設備屏幕寬度，不容許用戶縮放。主流的web app都是這麼設置的。

你們能夠看看這篇文章的具體介紹

www.jianshu.com/p/5c546401e…

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製代碼

• width=device-width ：表示寬度是設備屏幕的寬度
• initial-scale=1.0：表示初始的縮放比例
• minimum-scale=1.0：表示最小的縮放比例
• maximum-scale=1.0：表示最大的縮放比例
• user-scalable=no：表示用戶是否能夠調整縮放比例

但是我的在研究移動端適配的時候 發現了不少網站其實並無刻意地去設置viewport
尤爲是當網頁一開始並無考慮到移動端自適應方案的時候 寬度都是寫死的px具體值

若是不特地設置viewport 那麼瀏覽器會自動縮放，縮放到讓其不出現滾動條 其實也算是某種程度上的自適應

咱們能夠看一下效果

• 寬度寫死 不設置viewport

  

• 寬度寫死 設置viewport

  

能夠看到樣式明顯亂了 按照原始px值顯示出來 出現滾動條

小結

若是考慮作一個自適應的網站 那麼開始的時候就須要把思路規劃好 根據設計稿來設置本身的rem 使用媒體查詢 flex和百分比佈局等能夠用一套代碼個性化的去定製pc端和移動端樣式

若是須要對現有pc端項目進行移動端改造 那麼能夠根據項目複雜程度自行選用技術方案 固然 若是對自適應要求不是很高 對於老舊項目改造的時候 能夠考慮將項目版心寬度做爲自適應的基礎寬度 而後去掉viewport設置 讓瀏覽器自行縮放 雖然可能效果不如本身個性化定製那麼好 可是也是能夠做爲一種較爲簡單通用的方案去使用