rem實現(xiàn)響應(yīng)式布局的思路詳解

更新時間：2023年03月20日 14:22:26 作者：傻小子

這篇文章主要為大家介紹了rem實現(xiàn)響應(yīng)式布局的思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

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

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

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

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

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

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

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

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

那什么是媒體查詢？

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

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

那么什么是rem?

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

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

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

如果將標準的屏幕寬度設(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為單位了，在標準的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)式布局實現(xiàn)的思路，同時是基于rem來實現(xiàn)的，rem不僅僅只用于font-size來設(shè)置字體大小，如果你只是設(shè)置字體變大，盒子的寬度這些還是用px那就會出問題。凡是可以設(shè)置數(shù)值的屬性都可以用rem為單位，例如width、 height...?；趓em的響應(yīng)式布局是整個頁面所有的長度單位都使用rem，這只是實現(xiàn)響應(yīng)式布局的一種方式。