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

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

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

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

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

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

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

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

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

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

第一種是元素大小不隨設(shè)備屏幕變大而變大，比如屏幕、圖標(biāo)、導(dǎo)航欄等，因?yàn)槲覀冃枰獮橛脩舫尸F(xiàn)更多的內(nèi)容，這個(gè)時(shí)候使用的單位是px。

第二種情況，元素的大小需要隨著設(shè)備的變大而變化。這種情況一般作用于容器元素。因?yàn)槠聊蛔兇罅?，容器如果還是一樣的大小就不符合呈現(xiàn)更多內(nèi)容策略。這種情況的實(shí)現(xiàn)比較復(fù)雜，下面我們?cè)敿?xì)討論這種情況下的解決方案。

百分比

百分比這個(gè)單位是參照父元素大小的相對(duì)單位。其實(shí)百分比可以解決大部分問(wèn)題。

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

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

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

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

對(duì)了它得居中，這也沒(méi)什么問(wèn)題

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

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

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

似乎也沒(méi)有什么問(wèn)題，但是，如果我想讓它上下居中

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

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

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

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

我們?cè)囍隽?，但是他的高度?yīng)該是多少呢，確實(shí)百分比無(wú)能為力了。

vw & vh

vw 是將當(dāng)前屏幕的寬度分為一百份之后的長(zhǎng)度

wh 是將當(dāng)前屏幕的高度分為一百份之后的長(zhǎng)度

這幾乎是對(duì)百分比方案的完美補(bǔ)充了。針對(duì)上面百分比無(wú)能為力的兩個(gè)點(diǎn)，vw 和 vh 都能應(yīng)對(duì)。

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

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

百分比寬度元素固定長(zhǎng)寬比例

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

但是遺憾的是 vw 和 vh 存在著不可忽視的兼容新問(wèn)題;

用 rem 模擬 vw & vh

rem只能模仿 vw 和 vh 中的一個(gè)。因?yàn)橐话惚容^常用的是vw，所以我們把 rem 當(dāng)做 vw 使用。

可以使用腳本計(jì)算 html 的 rem，代碼如下

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

百分比寬度元素固定長(zhǎng)寬比例

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

由于 rem 只能模仿 vw vh 的一種所以這時(shí)候?qū)τ诎俜直雀叨仍氐拇怪本又?的實(shí)現(xiàn)就無(wú)能為力了。

用腳本實(shí)現(xiàn)

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

GPU云服務(wù)器云服務(wù)器 html實(shí)現(xiàn)手機(jī)端移動(dòng)端適配移動(dòng)端適配方案移動(dòng)端適配 js

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115245.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xingqiba

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

閱讀 1165·2019-08-30 12:48
CSS Grid 初識(shí)

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章