正文

你是不是經(jīng)常被問一個(gè)問題：Vue的響應(yīng)式原理是什么？哈哈哈... 先不講原理，想想Vue的響應(yīng)式是指什么？Vue的響應(yīng)式是指data中的數(shù)據(jù)變化，然后視圖（dom）會跟著變化。那么響應(yīng)式布局可以理解為就是xx變化，然后布局跟著變化。那這個(gè)xx指的是什么呢？為什么布局要跟著變化呢？ 下面一一來解答。

為什么要使用響應(yīng)式布局？

因?yàn)槲覀優(yōu)g覽網(wǎng)頁的設(shè)備屏幕大小不一樣，例如有屏幕大的有屏幕小的手機(jī)。

16px的字體在iPhone6/7/8上展示效果：

16px的字體在iPad上展示效果：

寫移動端H5網(wǎng)頁的時(shí)候，一般設(shè)計(jì)稿是以375px也就是iPhone6/7/8的屏幕寬度去設(shè)計(jì)的，當(dāng)有用戶使用iPad打開的時(shí)候效果就會很不好，這顯然不是我們想看到的。

如何實(shí)現(xiàn)響應(yīng)式布局呢？

也就是說我們?nèi)绾卧趇Pad上看到和iPhone6/7/8也差不多的效果呢？沒錯(cuò)你肯定想得到，那就是在iPad上的字體太小了，字體要設(shè)置得大一點(diǎn)才行。也就是說要實(shí)現(xiàn)字體的大小和隨著不同屏幕大小的變化。那如何實(shí)現(xiàn)在不同屏幕大小下，讓字體大小也不一樣呢？
那就是利用媒體查詢根據(jù)不同的屏幕設(shè)置各種屏幕寬度下的根元素font-size，然后布局使用rem代替px為長度單位，從而實(shí)現(xiàn)響應(yīng)式布局。

那什么是媒體查詢？

developer.mozilla.org/zh-CN/docs/…詳細(xì)的就不展開了,例如下面這段代碼就是指在最大屏幕寬度為374px的設(shè)備下，將根元素（html）的字體設(shè)置為86px

@media only screen and (max-width: 374px) {
    html {
        font-size: 86px
    }
}

那么什么是rem?

rem 是一個(gè)相對根元素（html）的長度單位px 是一個(gè)絕對長度單位em 同樣也是一個(gè)相對長度單位，只不過相對的是父元素如上面所設(shè)置的將html的font-szie設(shè)置為86px, 那么1rem就等于86px。

怎么計(jì)算出各個(gè)尺寸屏幕下的html元素font-size要設(shè)置為多少呢?

這個(gè)就得找一下各個(gè)屏幕尺寸下的代表機(jī)型，然后以其中一個(gè)為標(biāo)準(zhǔn)，計(jì)算出其他的。一般是以iPhone6/7/8為標(biāo)準(zhǔn)，為什么？因?yàn)楝F(xiàn)在設(shè)計(jì)稿大多是以iPhone6/7/8的屏幕寬度375px來設(shè)置的。
比較小的屏幕：iPhone5屏幕寬度：320px、標(biāo)準(zhǔn)的屏幕：iPhone6/7/8屏幕寬度：375px比較大的屏幕：iPhone6/7/8 Plus屏幕寬度：414px其他更多的比如iPad的屏幕：768px

如果將標(biāo)準(zhǔn)的屏幕寬度設(shè)置為100px
@media only screen and (min-width: 375px) and (max-width: 413px) {
    html {
        font-size: 100px
    }
}
那么小屏幕的  100 / x = 375 / 320   x = 85.333...
@media only screen and (max-width: 374px) {
    html {
        font-size: 85px
    }
}
那么大屏幕的  100 / x = 375 / 414  x = 110.4
@media only screen and (min-width: 414px) and (max-width: 767px) {
    html {
        font-size: 110px
    }
}
更大屏幕的  100 / x = 375 / 768  x = 204.8
@media only screen and (min-width: 768px) {
    html {
        font-size: 204px
    }
}
那么將.box的font-size就可以用rem為單位了，在標(biāo)準(zhǔn)的375px屏幕下，1rem就是100px,那么16px,就是 0.16rem。
.box {
   font-size: 0.16rem;
}
...
<div class="box">
    什么是響應(yīng)式布局？
</div>

在iPhone5上展示效果：

在iPhone6/7/8上展示效果：

在iPhone6/7/8 Plus上展示效果：

在iPad上展示效果：

怎么樣，是不是在各種尺寸屏幕下看到的效果是差不多的。這就是所謂隨著屏幕變化，布局跟著變化的響應(yīng)式布局實(shí)現(xiàn)的思路，同時(shí)是基于rem來實(shí)現(xiàn)的，rem不僅僅只用于font-size來設(shè)置字體大小，如果你只是設(shè)置字體變大，盒子的寬度這些還是用px那就會出問題。凡是可以設(shè)置數(shù)值的屬性都可以用rem為單位，例如width、 height...。基于rem的響應(yīng)式布局是整個(gè)頁面所有的長度單位都使用rem，這只是實(shí)現(xiàn)響應(yīng)式布局的一種方式。

完結(jié)感想

響應(yīng)式布局的優(yōu)勢就是一套代碼，為不同寬度的設(shè)備提供渲染效果不一樣的網(wǎng)頁，而只需要維護(hù)一套代碼。不需要針對不同的設(shè)備來寫多套代碼，同時(shí)解決了屏幕小內(nèi)容會擁擠、屏幕大一點(diǎn)的話內(nèi)容又看不清楚的問布局題。

以上就是rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解的詳細(xì)內(nèi)容，更多關(guān)于rem響應(yīng)式布局思路的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論