rem基礎(chǔ)

rem單位

rem (root em)是一個相對單位，類似于em，em是父元素字體大小。

不同的是rem的基準是相對于html元素的字體大小。

比如，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px。

/* 根html 為 12px */
html {
   font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */       
div {
    font-size: 2rem;
}

媒體查詢

什么是媒體查詢

媒體查詢（Media Query）是CSS3新語法。

• 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
• @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
• 當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
• 目前針對很多蘋果手機、Android手機，平板等設(shè)備都用得到多媒體查詢

媒體查詢語法規(guī)范

• 用 @media開頭 注意@符號
• mediatype 媒體類型
• 關(guān)鍵字 and not only
• media feature 媒體特性必須有小括號包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

1. mediatype 查詢類型

? 將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型

1.jpg

2. 關(guān)鍵字

? 關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。

• and：可以將多個媒體特性連接到一起，相當于“且”的意思。
• not：排除某個媒體類型，相當于“非”的意思，可以省略。
• only：指定某個特定的媒體類型，可以省略。

3. 媒體特性

   每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風格。我們暫且了解三個。

   注意他們要加小括號包含

   
   
   2.jpg

4. 媒體查詢書寫規(guī)則
   注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔

   
   
   3.png