一铣卡、meta viewport（視口）
移動端初始視口的大小為什么默認是980px链韭？
因為世界上絕大多數(shù)PC網(wǎng)頁的版心寬度為 980px ，如果網(wǎng)頁沒有專門做移動端適配算行，此時用手機訪問網(wǎng)頁旁邊剛好沒有留白梧油，不過頁面縮放后文字會變得非常小。
為了解決頁面縮放的體驗問題州邢，在網(wǎng)頁代碼的頭部儡陨，加入一行viewport元標簽。
<meta name="viewport" content="width=device-width, initial-scale=1">?這里的device-width告訴瀏覽器量淌，將視口的寬度設(shè)置為設(shè)備寬度（這個寬度是人為預(yù)設(shè)的骗村，不設(shè)的話就是980px）。
屬性含義
initial-scale：第一次進入頁面的初始比例
minimum-scale：允許縮小最小比例
maximum-scale：允許放大最大比例
user-scalable：允許使用者縮放呀枢，1 or 0 (yes or no)
二胚股、圖片適配
img { max-width: 100%; }
此時圖片會自動縮放，同時?圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）
為什么不用 img { width: 100%; } 裙秋？
當(dāng)容器大于圖片寬度時琅拌，圖片會無情的拉伸變形
三、媒體查詢
為什么要媒體查詢摘刑？
針對不用的設(shè)備提前為網(wǎng)頁設(shè)定各種 CSS 樣式CSS3中的Media Query模塊进宝，自動檢測屏幕寬度，然后加載相應(yīng)的CSS文件?
語法舉例
@media screen and (min-width:1200px){
body{
background-color: red;
}?
當(dāng)屏幕寬度大于1200px時枷恕，背景色變?yōu)榧t色?
四党晋、動態(tài) rem 方案
為什么要用rem？
和媒體查詢配合，實現(xiàn)響應(yīng)式布局
px未玻、em灾而、rem 有什么不同？
px是pixel（像素）扳剿，是屏幕上顯示數(shù)據(jù)的最基本的點旁趟，在HTML中，默認的單位就是px舞终；em 是一個相對大小轻庆，相對于父元素font-size的百分比大小rem 是相對于根元素<html>的font-size
用法示例
1、首先在HTML中設(shè)置一個基準值敛劝，如font-size: 100px;
2、將像素值除以100（設(shè)定的基準值）計算出對應(yīng)的rem的值
如果一個div的寬度為600300px ,改為rem即為6rem3rem
3纷宇、根據(jù)當(dāng)前屏幕的寬度和設(shè)計稿的寬度來計算此時的HTML的font-size的值
當(dāng)前手機屏幕寬度為375px夸盟，設(shè)計稿寬度為640px，375/640*100->fontsize=58.59375
