rem布局
一、rem布局概念
1.rem是什么?
rem(font size of the root element)是指相對于根元素的字體大小的單位
2.為什么web app要使用rem？
實現(xiàn)強大的屏幕適配布局(淘寶,騰訊,網(wǎng)易等網(wǎng)站都是rem布局適配)rem能等比例適配所有屏幕,根據(jù)變化html的字體大小來控制rem的大小,如不同html字體大小的計算下,rem值不同
em 單位
//div和span為父子關(guān)系
<div>
<span></span>
</div>
//父元素 為 6px
div {
font-size: 6px;
}
//此時 div 的字體大小就是 18px
span {
font-size: 3em;
}
rem 單位
- rem (root em)是一個相對單位，類似于em，em是父元素字體大小。
- 不同的是rem的基準(zhǔn)是相對于html元素的字體大小。
- 比如，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px。
- rem的優(yōu)勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。
/* 根html 為 12px */
html {
font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */
div {
font-size: 2rem;
}
二、媒體查詢
2.1 什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機，平板等設(shè)備都用得到多媒體查詢
2.2 語法規(guī)范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 用 @media 開頭 注意@符號
- mediatype 媒體類型
- 關(guān)鍵字 and not only
- media feature 媒體特性 必須有小括號包含
1. mediatype 查詢類型
將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型.
2. 關(guān)鍵字
關(guān)鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個媒體特性連接到一起，相當(dāng)于“且”的意思。
- not：排除某個媒體類型，相當(dāng)于“非”的意思，可以省略。
- only：指定某個特定的媒體類型，可以省略。
3. 媒體特性
每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三個。
注意他們要加小括號包含.
4.媒體查詢書寫規(guī)則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔。
2.3 媒體查詢+rem實現(xiàn)元素動態(tài)大小變化
- rem單位是跟著html來走的，有了rem頁面元素可以設(shè)置不同大小尺寸
- 媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式
- 媒體查詢+rem 就可以實現(xiàn)不同設(shè)備寬度，實現(xiàn)頁面元素大小的動態(tài)變化
三、引入資源
- 當(dāng)樣式比較繁多的時候，我們可以針對不同的媒體使用不同 stylesheets（樣式表）。
- 原理，就是直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件。
1. 語法規(guī)范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
2. 示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
