正文

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

為什么要使用響應式布局？

因為我們?yōu)g覽網(wǎng)頁的設備屏幕大小不一樣，例如有屏幕大的有屏幕小的手機。

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

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

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

如何實現(xiàn)響應式布局呢？

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

那什么是媒體查詢？

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

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

那么什么是rem?

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

怎么計算出各個尺寸屏幕下的html元素font-size要設置為多少呢?

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

如果將標準的屏幕寬度設置為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為單位了，在標準的375px屏幕下，1rem就是100px,那么16px,就是 0.16rem。
.box {
   font-size: 0.16rem;
}
...
<div class="box">
    什么是響應式布局？
</div>

在iPhone5上展示效果：

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

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

在iPad上展示效果：

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

完結感想

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

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

最新評論