css筆記：rem佈局

rem佈局能夠等比例的縮放頁面(寬高都自適應,在移動端較好),用戶體驗相對百分比佈局可能會更好一些

1 rem定義

rem（font size of the root element）是指相對於根元素的字體大小的單位。它是一個相對單位。

em（font size of the element）是指相對於當前元素的字體大小的單位。它也是一個相對單位。

【01-em佈局存在問題.html】

• css

body{
    font-size: 20px;/*此時在瀏覽器的調試窗口改變這個值,會等比例放大和縮小*/
}
.box{
    width: 25em;/* 500px*/
    height: 25em;/*500px*/
    border: 1px solid red;
    margin: 2.5em auto;/*20px*/
}
.in{
    width: 15em;/*300px*/
    height: 15em;/*300px*/
    border: 1px solid blue;
    margin: 2.5em auto;/*20px*/
    /*font-size: 20px;*/  /*這裏加上這行佈局就亂了*/
}

• html

<div class="box">
     <div class="in">
     全棧工程師,呸,全乾工程師纔對。
     </div>
 </div>

總結：不能用em來佈局,而是經過rem來佈局。em來佈局,當前元素的font-size一改變,佈局就亂了。

【02-rem佈局.html】

將【01-em佈局存在問題.html】這個例子中的css改爲rem

html{
     font-size: 20px;/*此時在瀏覽器的調試窗口改變這個值,會等比例放大和縮小*/
 }
.box{
    width: 25rem;/* 500px*/
    height: 25rem;/*500px*/
    border: 1px solid red;
    margin: 2.5rem auto;/*20px*/
}
.in{
    width: 15rem;/*300px*/
    height: 15rem;/*300px*/
    border: 1px solid blue;
    margin: 2.5rem auto;/*20px*/
    font-size: 30px;/*加上這個佈局也不會亂*/
}

2 rem實現響應式

由於rem的基準點是根元素html的字體大小，所以只須要設置不一樣屏幕的html的font-size大小不同就能夠達到不一樣屏幕的適配了。

注意：

• 在設置背景圖片的時候必定要設置backgroud-size的rem,圖片才能實現響應式。
• 總體佈局的時候不要使用rem,用rem總體佈局會亂；好比一行放3個盒子或者n個盒子，可使用百分比實現;rem只用來修飾font-size,height,width等等。

2.1 rem+媒體查詢實現

使用rem配合媒體查詢能夠適配多個終端
// 320 360 375 384 400 414 424 480 484 540 720 750

@media (min-width: 320px) {
    html {        
        font-size: 42.67px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 50px;;
    }
}
@media (min-width: 414px) {
    html {
        font-size: 55.2px;;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 64px;;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 85.33px;
    }
}
@media (min-width: 750px) {
    html {
        font-size: 100px;;
    }
}

優勢：使用媒體查詢適配，速度快。

缺點：適配多個終端時，須要添加響應的代碼。

2.2 rem+JavaScript實現

原理：經過js監聽瀏覽器的寬度,動態設置html的font-size的值

通常狀況下1rem的值設置爲屏幕寬度的十分之一

// 1rem大小爲 屏幕寬度1/10
// 動態監聽屏幕寬度變化，實時設置rem大小

function setRem() {
    var w = window.innerWidth; //獲取屏幕寬度
    //最大寬度限制
    if (w > 640) {
        w = 640;
    } 
    //設置rem大小
    document.documentElement.style.fontSize = w / 10 + 'px';
}

setRem();

//監聽瀏覽器窗口尺寸變化
window.onresize = setRem;

優勢：直接適配全部的終端

缺點：必須在頁面加載以前設置html的font-size值，否則會出現文字大小調動的狀況。

2.3 總結

rem+js的方式會更好一些

3 vscode的rem插件

px2rem插件能夠快速的將px轉化成rem單位

使用方法

• 第一步：安裝插件,安裝完插件後須要重啓vscode
• 第二步：右擊插件--->擴展設置--->Root Font Size下輸入框中設置font-size便可
• 第三步：在樣式中輸入px時,在下拉選項中選擇轉化成rem便可