Rem和max-width工作方式

max-width

首先我們先看普通的width是什麼樣的效果！

首先給個測試的div

<div class="test">TEST</div>           

• 然後CSS給定一個寬度

.test {
    width: 1000px;
    background-color: red;
    padding: 100px;
}           

如上圖，不管你的浏覽器視窗如何改變，你元素的寬度都不會改變；當你縮小視窗視圖的實話，流量器會仍然會創造出滑動的空間！

• 但是我們如果使用max-width

.test {
    /* width: 1000px; */
    max-width: 1000px;
    background-color: red;
    padding: 100px;
}           

總結一句話，使用max-width時，當視圖視窗大于元素寬度時，那元素寬度就是實際的寬度，但是如果視圖視窗寬度小于元素寬度時， 則元素寬度會充滿視口視窗寬度！

rem

• 概念：rem是根元素字型的機關，比如 html {font-size:16px;} ，1rem相當于16px。預設情況下，1rem就是等于16px。‘

例如

.test {
    /* width: 1000px; */
    /* max-width: 1000px; */
    background-color: red;
    max-width: 50rem;   #是以這個寬度是50*16
    padding: 4rem;  #這個是4*16
    font-size: 2rem; #這個是2*16
    color: #fff;
}           

html {
    font-size: 10px;
}           

如果想這樣設計，那麼預設大小就是10了。不是16了

但是這個也會帶來一個問題，就是這樣不容易實作響應式設計，因為我們無法友善的去實作等比例縮放，是以在響應式設計中，我們通過是通過百分比的方式去寫

html {
    font-size: 62.5%;
}           

那麼62.5%的這個值是從哪裡來的呢？10/16=0.625 =62.5%，是以仍然代表此頁面情況下，預設值是10

至于這麼設定的優點如下：

1. 重置rem機關基準值。浏覽器預設的font-size為16px,這會使rem的值不直覺。設定為62.5%後,1rem = 10px,這樣rem的計算就簡單多了。
2. 友善等比例縮放。通過設定html的font-size,然後使用rem作為長度機關,就可以非常容易地實作整個頁面的等比例縮放。隻需要改變這個值,所有使用rem的元素就會按比例放大或縮小。
3. 相容性更好。雖然rem在現代浏覽器中得到廣泛支援,但老舊浏覽器支援不夠好。将html的字型大小設定為62.5%,這些浏覽器會把rem作為px來處理,内容也不會出現錯亂的現象,隻是失去等比縮放的能力。
4. 移動端适配友善。在移動端設計中,經常需要根據螢幕寬度進行縮放,設定html字型大小是一個非常簡便的操作