手機端適配策略以及實現

設備自己的適配策略

ios和Android的適配策略是不同的。

對於ios,一個設備含有越多的邏輯像素，那麼這個設備也就越大，換句話說，ios的邏輯像素能夠做爲一個物理長度單位。應用的場景是這樣的，用px單位設置了一個元素的大小，這個元素在不一樣大小的ios設備下其實是同樣大的。因此ios策略是更大的屏幕是爲了顯示更多的內容。暫且將它稱之爲更多內容策略。

然而對於Android設備，大體的狀況是無論設備大小，包含的邏輯像素寬度都是360px。用px單位設置一個元素的大小，設備越大，它在設備上呈現的也等比變大。因此Android的策略是，屏幕越大是爲了讓內容看起來更大。暫且稱之爲更大內容策略。

我的認爲ios的策略更爲合理。可是因爲咱們沒法獲取設備的物理尺寸大小，因此也就沒有辦法在Android的設備上面應用更多內容策略。因此我決定就在ios的設備上面執行ios的更多內容策略，而在Android的設備上執行更大內容策略。

ios的適配的策略實現

根據更多內容策略，咱們會遇到兩種狀況

第一種是元素大小不隨設備屏幕變大而變大，好比屏幕、圖標、導航欄等，由於咱們須要爲用戶呈現更多的內容，這個時候使用的單位是px。

第二種狀況，元素的大小須要隨着設備的變大而變化。這種狀況通常做用於容器元素。由於屏幕變大了，容器若是仍是同樣的大小就不符合呈現更多內容策略。這種狀況的實現比較複雜， 下面咱們詳細討論這種狀況下的解決方案。

百分比

百分比這個單位是參照父元素大小的相對單位。其實百分比能夠解決大部分問題。

我須要一個佔據整個屏幕大小的容器，下面的代碼能夠完美解決

.container { 
    width:100%; 
    height:100%; 
}

又或者我須要一個佔據屏幕百分之五十的內容彈窗，至於高度就由內容決定吧

.dialog { 
    width:50%; 
    height:auto; 
}

對了它得居中，這也沒什麼問題

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%; 
}

可是，如何涉及到高度，百分比的問題就顯現出來了。好比我想讓上面的彈窗的高度爲屏幕高度的60%，至於內容過多就讓它內部滾動吧；

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%;
    height:60%;
}

彷佛也沒有什麼問題，可是，若是我想讓它上下居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60%;
    margin-top:-30%;
    top:50%;
}

無奈的發現它並無居中，問題就出在maring-top 百分比所參照的是父級元素的寬度而不是高度。終於發現了一個百分比無能爲力的一個點了。

改變一下需求，咱們須要一個正方形的彈窗，彈窗的寬度仍是要求50%；

.dialog {
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height: ?%;
}

咱們試着作了，可是他的高度應該是多少呢，確實百分比無能爲力了。

vw & vh

vw 是將當前屏幕的寬度分爲一百份以後的長度

wh 是將當前屏幕的高度分爲一百份以後的長度

這幾乎是對百分比方案的完美補充了。針對上面百分比無能爲力的兩個點，vw 和 vh 都能應對。

百分比高度元素的垂直居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60vh;
    margin-top:-30vh;
    top:50%;
}

百分比寬度元素固定長寬比例

.dialog { 
        width:50vw;
        margin-left:-25vw; 
        left:50%;
        height: 50vw;
}

可是遺憾的是 vw 和 vh 存在着不可忽視的兼容新問題;

用 rem 模擬 vw & vh

rem只能模仿 vw 和 vh 中的一個。由於通常比較經常使用的是vw，因此咱們把 rem 當作 vw 使用。

能夠使用腳本計算 html 的 rem，代碼以下

var deviceWidth = window.screen.width;
document.querySelector('html').style.fontSize = (deviceWidth)+'px';

百分比寬度元素固定長寬比例

.dialog {
    width: 0.5 rem;
    margin-left: -0.25 rem;
    left: 50%;
    height: 0.25 rem;
}

因爲 rem 只能模仿 vw vh 的一種 因此這時候對於百分比高度元素的垂直居中 的實現就無能爲力了。

用腳本實現

有極少數佈局上的問題 css彷佛無能爲力了。這個適合只能依靠萬能的腳本了。