移動端自適應疑問？

&

用這，然後按照320設備寬開發，能夠達到各個設備自適應。

我就很奇怪，為什麼還要用百分比，rem，流式，等一些比較複雜的自適應方案呢？

誰能給我解釋下呀？

---

請使用手淘的flexible: GitHub - amfe/lib-flexible: 可伸縮布局方案

詳細教程：使用Flexible實現手淘H5頁面的終端適配

---

確實也可以將就用。

然而都用同一個布局的話，小屏的布局放到大屏上，所有的控制項、文字會很大，邊距也很大（物理尺寸），；字體會發虛（非整數）；豎屏上能放下的內容，轉一個成橫屏只能顯示上半部分（屏幕比例變化）。

---

因為視窗定寬的方式也可以實現自適應的效果，但是要不給縮放相關的屬性。

像這樣:

&

我們就可以直接通過px為單位開發然後利用viewport的特性，它會自己縮放到設備的完美視窗寬度，可以使用這種方法進行一些布局簡單的頁面，但是布局稍微複雜就會有失真的情況出現。

所以我們通常用rem的方式進行適配。

像淘寶就更高端點，考慮到dpr，那就意味著設計稿也要對等提供，所以淘寶只是一個頁面會有多個寬度不同的設計稿。

參考:http://www.chengfeilong.com/mobile-layout

---

要適配 viewport 是要動態生成的，一般是根據設備的 DPR 來生成。你這樣寫死的話，就不能適配高分屏了。

具體見：

移動端適配方案(上) · Issue #17 · riskers/blog · GitHub

移動端適配方案(下) · Issue #18 · riskers/blog · GitHub

---

使用rem做適應，

rem是使用基於html根元素（html）字體大小作為標準（1em）寬度的

單位在寬度描述上類似於百分比

但比百分比好的一點是，它可以設置基於寬度百分比的高度

比如：

將html字體設置為屏幕寬度的 1/100，那麼當我們使用1rem來設置

元素的寬度時，其元素寬度為屏幕的
1/100，同樣我們使用1rem來設置元素

的高度時，其元素高度為屏幕寬度的 1/100。

示例代碼：

&
&
&
&
&

&模板&

&

&

@media only screen and (min-width: 750px) {

font-size: 200px;

}

}

body {

font-size: 0;

}

就是以375寬度的屏幕作為基準（如果想用320的，就把3.75修改成3.2，對應的，在媒體查詢裡面做對應的換算）

然後設計師會給出以750px為寬度的設計圖，例如裡面有一個長度為128px的東西，對應的rem就是0.64rem;

當然使用calc和vw對瀏覽器版本有一定的要求

---

推薦閱讀：