手機端適配策略以及實現(xiàn)

xingqiba 發(fā)布于2019-08-30 13:01 / 1307人閱讀

摘要：設(shè)備本身的適配策略和的適配策略是不一樣的。暫且稱之為更大內(nèi)容策略。個人認為的策略更為合理。這種情況一般作用于容器元素。用腳本實現(xiàn)有極少數(shù)布局上的問題似乎無能為力了。

設(shè)備本身的適配策略

ios和Android的適配策略是不一樣的。

對于ios,一個設(shè)備含有越多的邏輯像素，那么這個設(shè)備也就越大，換句話說，ios的邏輯像素可以作為一個物理長度單位。應(yīng)用的場景是這樣的，用px單位設(shè)置了一個元素的大小，這個元素在不同大小的ios設(shè)備下實際上是一樣大的。所以ios策略是更大的屏幕是為了顯示更多的內(nèi)容。暫且將它稱之為更多內(nèi)容策略。

然而對于Android設(shè)備，大致的情況是不管設(shè)備大小，包含的邏輯像素寬度都是360px。用px單位設(shè)置一個元素的大小，設(shè)備越大，它在設(shè)備上呈現(xiàn)的也等比變大。所以Android的策略是，屏幕越大是為了讓內(nèi)容看起來更大。暫且稱之為更大內(nèi)容策略。

個人認為ios的策略更為合理。但是由于我們無法獲取設(shè)備的物理尺寸大小，所以也就沒有辦法在Android的設(shè)備上面應(yīng)用更多內(nèi)容策略。所以我決定就在ios的設(shè)備上面執(zhí)行ios的更多內(nèi)容策略，而在Android的設(shè)備上執(zhí)行更大內(nèi)容策略。

ios的適配的策略實現(xiàn)

根據(jù)更多內(nèi)容策略，我們會遇到兩種情況

第一種是元素大小不隨設(shè)備屏幕變大而變大，比如屏幕、圖標、導(dǎo)航欄等，因為我們需要為用戶呈現(xiàn)更多的內(nèi)容，這個時候使用的單位是px。

第二種情況，元素的大小需要隨著設(shè)備的變大而變化。這種情況一般作用于容器元素。因為屏幕變大了，容器如果還是一樣的大小就不符合呈現(xiàn)更多內(nèi)容策略。這種情況的實現(xiàn)比較復(fù)雜，下面我們詳細討論這種情況下的解決方案。

百分比

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

我需要一個占據(jù)整個屏幕大小的容器，下面的代碼可以完美解決

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

又或者我需要一個占據(jù)屏幕百分之五十的內(nèi)容彈窗，至于高度就由內(nèi)容決定吧

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

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

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

但是，如何涉及到高度，百分比的問題就顯現(xiàn)出來了。比如我想讓上面的彈窗的高度為屏幕高度的60%，至于內(nèi)容過多就讓它內(nèi)部滾動吧；

.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%;
}

無奈的發(fā)現(xiàn)它并沒有居中，問題就出在maring-top 百分比所參照的是父級元素的寬度而不是高度。終于發(fā)現(xiàn)了一個百分比無能為力的一個點了。

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

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

我們試著做了，但是他的高度應(yīng)該是多少呢，確實百分比無能為力了。

vw & vh

vw 是將當前屏幕的寬度分為一百份之后的長度

wh 是將當前屏幕的高度分為一百份之后的長度

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

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

.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 的一種所以這時候?qū)τ诎俜直雀叨仍氐拇怪本又?的實現(xiàn)就無能為力了。

用腳本實現(xiàn)

有極少數(shù)布局上的問題 css似乎無能為力了。這個適合只能依靠萬能的腳本了。

GPU云服務(wù)器云服務(wù)器 html實現(xiàn)手機端移動端適配移動端適配方案移動端適配 js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115245.html

發(fā)表評論

登陸后可評論

0條評論

xingqiba

男|高級講師

我要關(guān)注我要私信

TA的文章

奈學(xué)P7業(yè)務(wù)架構(gòu)師

閱讀 1179·2021-11-22 15:24
lisahost：美國新的全解鎖原生IP 206段上架開售，支持tiktok等，季付122元起

閱讀 4459·2021-09-23 11:51
如何使用python制作一款屏幕顏色提取器，附帶exe文件

閱讀 2320·2021-09-08 09:36
css盒模型理解

閱讀 3529·2019-08-30 15:43
手機端適配策略以及實現(xiàn)

閱讀 1308·2019-08-30 13:01
工欲善其事，必先利其器 _SUBLIME TEXT 3_使用心得（上篇）

閱讀 1127·2019-08-30 12:48
CSS Grid 初識

閱讀 547·2019-08-29 12:52
CSS display 屬性詳解

閱讀 3381·2019-08-29 12:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

手機端適配策略以及實現(xiàn)

相關(guān)文章