最簡單的移動端適配方案

目前最流行的方案當屬**的flexible了，因為之前一直做服務端開發，對前端不是很了解。對於這套方案看了n久還是不太理解，後來自己學習viewport的相關概念，捉摸出一套自己的辦法（至少我沒查到有人這麼幹的…），寫在這裡和大家分享一下。

其實對於多數的移動h5的適配需求並沒有那麼繁瑣，只要保證和設計稿比例一致，在各種奇葩螢幕都能夠顯示出完整的資訊就可以了。所以這裡不討論retina螢幕模糊問題，只考慮適配

需求：

通過設計稿各種標註，解決css中尺寸和單位問題

保證各種手機能夠完整顯示內容，比例和設計稿一致

如果希望做retina適配，多一步計算dpr並按需載入就行了

假定設計稿為750px

方案一：

必備知識：rem 在html中設定font-size為10px，那麼1 rem就為10px，所以想表示寬度為100px的div那就用10

rem

window.innerwidth
;

var re = window.innerwidth/750;

這裡需要說明一下，除以750是除以設計稿的寬度。設計稿中的1px換做其他螢幕中就是其他手機螢幕尺寸的1/750，也就是1rem。

var docel = document.documentelement;
var fontel = document.createelement('style');
fontel.innerhtml = 'html';

這個時候就盡情玩耍吧，100px就寫作100rem，字型的話也直接寫rem。

方案二：

首先要理解viewport的概念，可以參考這篇文章，寫的很詳細文移動前端開發之viewport的深入理解。總結下來就是viewport在移動端是可變的，我們把這個叫做layout viewport。預設都比手機的螢幕大很多（多數都是980px）。如果什麼都不設定，我們的px都是相對於這個layout viewport而言的。所以正常情況下我們在手機上看pc的頁面都是看不全的，但是各個手機廠商的做法不太一樣，有的就是看不全了，只顯示乙個角落，但是例如iphone這種就會對頁面進行縮放，讓整個pc頁面都擠進你的小螢幕中，所以看到的字型或者本身

也就小了。如果還是不明白呢也沒關係。按照下面的做法做就可以了。

之前提到所有的px都是相對layout viewport而言的，750的設計稿中100px是相對750px寬度，如果讓手機也認為自己的layout viewport是750px，那麼所有的尺寸換算就交給系統自己完成就行了。所以：

name="viewport"
content="width:750,user-scalable=no" />

設定好之後，按照設計稿元素尺寸直接寫100px就是想要的效果了

總結：

以上就是我對移動端處理的辦法，簡單而且有效。不需要複雜的js**，不用less，scss也能正常使用。如果要說缺點的話也就是隨著螢幕尺寸增大或者縮小，字型也會隨著增大縮小，並不會像**那種在視覺感官上的大小不變，不過我覺得對於絕大多數的h5頁面是沒必要這麼做的。

因為是剛剛轉做前端，說的不對的地方還請多多指出，謝謝！

另外，始終不太理解**對於字型大小不變的方案是怎麼解決的，如果能夠用簡單的幾句話講明白這個原理希望能告知下哈！

最簡單的移動端適配方案

移動端適配方案

移動端適配方案

移動端適配方案

相關推薦