自適應(yīng)和響應(yīng)式

adam1q84 發(fā)布于2019-08-23 18:01 / 2186人閱讀

摘要：響應(yīng)式無論響應(yīng)式還是自適應(yīng)，都是針對(duì)每一個(gè)元素進(jìn)行寬度的變化和布局的變化。自適應(yīng)自適應(yīng)是，程序代碼已經(jīng)為不同的寬度配備了不同的樣式代碼大小和布局。參考資料布局自適應(yīng)自適應(yīng)和響應(yīng)式區(qū)別技術(shù)方案選擇

背景

????隨著移動(dòng)設(shè)備和前端技術(shù)的發(fā)展，交互頁(yè)面也在移動(dòng)端使用越來越頻繁。但是移動(dòng)設(shè)備屏幕的大小和分辨率并不一致，這導(dǎo)致了并不能按照pc端編寫頁(yè)面的方式去編寫移動(dòng)端頁(yè)面。
????隨著實(shí)踐地不斷進(jìn)行和技術(shù)的發(fā)展，逐漸形成了下面幾個(gè)概念：

自適應(yīng)（Adaptive）
???? 程序代碼主動(dòng)地去根據(jù)不同的屏幕大小，去實(shí)現(xiàn)不同的樣式代碼，需要實(shí)現(xiàn)不同的樣式代碼。

響應(yīng)式（Responsive）
???? 程序代碼被動(dòng)地去適應(yīng)屏幕的寬度變化，經(jīng)常使用百分比或者media查詢。

網(wǎng)上流傳最多的圖就是下面的圖，個(gè)人認(rèn)為還是可以能夠解釋兩者之間的區(qū)別

但其實(shí)這兩者之間的區(qū)別很難區(qū)分，有的程序界面更是把兩者結(jié)合起來，實(shí)現(xiàn)更好的用戶體驗(yàn)，畢竟用戶至上。下面就從實(shí)際應(yīng)用方面來講一下，具體的實(shí)際應(yīng)用。

響應(yīng)式

無論響應(yīng)式還是自適應(yīng)，都是針對(duì)每一個(gè)html元素進(jìn)行寬度的變化和布局的變化。在我看來，響應(yīng)式就是讓html元素寬度能夠根據(jù)不同的屏幕寬度，進(jìn)行對(duì)應(yīng)的寬度變化。

實(shí)現(xiàn)方式——百分比寬度

常用的百分比寬度，比如antd的柵格布局，就是將屏幕劃分為24格，每一個(gè)格子占據(jù)4.1%的寬度。

實(shí)現(xiàn)方式——flex布局

????flex是彈性盒，將某一個(gè)元素設(shè)置為彈性盒，就創(chuàng)建了一個(gè)BFC，可以設(shè)置內(nèi)部元素的相關(guān)屬性?？梢栽O(shè)置內(nèi)部元素的shrink/grow/order。這樣就能夠讓內(nèi)部元素隨著屏幕的變化進(jìn)行不同的寬度變化。
????這里就不講flex的具體知識(shí)點(diǎn)了，詳情查看參考資料。

缺點(diǎn)

針對(duì)元素進(jìn)行寬度變化，布局仍然遵循流式布局。所有的布局都是統(tǒng)一的。   
具體內(nèi)容的元素并沒有變化，比如字體的大小。

自適應(yīng)

自適應(yīng)是，程序代碼已經(jīng)為不同的寬度配備了不同的樣式代碼（大小和布局）。當(dāng)用戶界面切換到不同的大小的時(shí)候，就展示不同的樣式或者布局。

具體可以分為兩類：

階梯式

平滑式

1、階梯式自適應(yīng)

如圖所示:

階梯式自適應(yīng)，就是對(duì)不同的大小設(shè)置不同的樣式，通常使用media查詢。設(shè)置不同的斷點(diǎn)，在不同的斷點(diǎn)處設(shè)置不同的樣式。當(dāng)然也可以設(shè)置一個(gè)范圍內(nèi)的樣式。

@media screen and (device-width: 640px) {
    html {
        font-size: 100px;
        color: blue
    }
}

@media all and (min-width:500px) and (max-width:1000px){
    body{
        color:#f00;
    }
}

可以根據(jù)不同的屏幕寬度設(shè)置不同的布局

與rem（em）結(jié)合

rem是根據(jù)文檔元素跟節(jié)點(diǎn)的字體大小設(shè)置不同的大小  
em是根據(jù)當(dāng)前對(duì)象的字體大小

@media screen and (device-width: 640px) {
    html {
        font-size: 100px;
        color: blue
    }
}
div {
    // 這里的1rem就是100px
    width: 1rem;
}

與rem結(jié)合，可以解決不同屏幕尺寸下，字體大小的變化，對(duì)于font-size大小的設(shè)置，可以參考天貓、京東的rem設(shè)置。

缺點(diǎn)

這樣做可以在不同的寬度顯示不同的樣式，但是沒法實(shí)現(xiàn)持續(xù)性的變化，可能會(huì)看到不同頁(yè)面大小請(qǐng)看下屏幕中的字體或者其他會(huì)突然變化。

2、平滑式自適應(yīng)

如圖所示：

平滑自適應(yīng)可以看作變化度特別小的階梯式自適應(yīng)。

方法

主要通過設(shè)置監(jiān)聽函數(shù)，動(dòng)態(tài)改變font-size的大小。

window.addEventListener("resize", adjustWidth);
const adjustWidth = () => {
    var deviceWidth = 
        document.documentElement.clientWidth > 1300 
        ? 1300 
        : document.documentElement.clientWidth;

    document.documentElement.style.fontSize = (deviceWidth / 6.4) + "px";
}

結(jié)合rem就可以動(dòng)態(tài)設(shè)置html元素的大小。

技術(shù)方案選擇

整體來說，沒有哪一種方案是最合適的。經(jīng)常需要幾種不同的技術(shù)手段互相結(jié)合。
經(jīng)常用的方式就是：

通過media查詢，設(shè)置font-size的大小，具體的元素可以通過flex或者百分比布局，就基本可以解決大部分問題。

祝大家端午節(jié)快樂。

參考資料

1、Flex布局
2、web自適應(yīng)
3、自適應(yīng)和響應(yīng)式區(qū)別
4、技術(shù)方案選擇

云服務(wù)器 GPU云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

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

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

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

登陸后可評(píng)論

0條評(píng)論

adam1q84

男|高級(jí)講師

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

TA的文章

Android程序員到底有多累，多辛苦？

閱讀 715·2021-11-18 10:02
阿帕云引擎出售,idc管理系統(tǒng)源碼,主機(jī)服務(wù)器管理系統(tǒng)(終生免費(fèi)升級(jí)/續(xù)簽)

閱讀 3605·2021-09-02 10:21
npm 注冊(cè)中心正在棄用 TLS 1.0 和 TLS 1.1

閱讀 1752·2021-08-27 16:16
CSS 資料資地址

閱讀 2065·2019-08-30 15:56
整理前端各位面試達(dá)人的面經(jīng)

閱讀 2393·2019-08-29 16:53
關(guān)于某題左列定寬右列寬度自適應(yīng)布局的學(xué)習(xí)

閱讀 1380·2019-08-29 11:18
[譯文] JavaScript工作原理：內(nèi)存管理+如何處理4種常見的內(nèi)存泄露

閱讀 2960·2019-08-26 10:33
JS原型解析

閱讀 2648·2019-08-23 18:34

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

資訊專欄INFORMATION COLUMN

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

自適應(yīng)和響應(yīng)式

相關(guān)文章