1. 設備像素比

iphone3的分辨率為320x480，1個css像素等於一個屏幕物理像素

iphone4的分辨率為640x960（蘋果公司便推出了所謂的Retina屏），分辨率提高了一倍，導致同樣大的屏幕上像素多了一倍，安卓設備上分為ldpi、mdpi、hdpi、xhdpi等不同的等級

window對象有一個devicePixelRatio屬性，官方定義為：設備物理像素和設備獨立像素的比例，即 devicePixelRatio = 物理像素 / 獨立像素

在Retina屏的iphone上，devicePixelRatio的值為2，即1個css像素相當於2個物理像素

蘋果的iphone6是2倍圖，一般寫代碼時量完尺寸都要除以2

2. 視口

手機端比較窄，若把PC端的網頁直接放在移動端會無法完全顯示，出現滾動條且字體較大，可以對viewport(視口)進行設置，把網頁縮放在這個視口裏，使其在移動端正常顯示。

一般寫移動端或響應式時會加上如下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

快捷鍵：meta:vp+tab鍵

3. rem和em的區別

rem 的參照點是html根元素

em 的參照點是定義了字體的父元素（不推薦）

1em=16px 0.75em=12px

4. 媒體查詢

@media screen and (max-width:768px){
    body{
        width:100%;
        height:100%;
        background-color:red;
    }
}
@media screen and (min-width:768px) and (max-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:green;
    }
}
@media screen and (min-width:1200px){
    body{
        width:100%;
        height:100%;
        background-color:yellow;
    }
}

5. 伸縮布局

給父元素設置伸縮盒子 display:flex

給父元素設置justify-content來調整主軸方向子元素的對齊方式 有flex-start flex-content center space-around 和space-between等屬性

給父元素設置align-items來調整側軸方向子元素的對齊方式 有flex-start flex-content center stretch等屬性

flex是設置子元素在伸縮盒子的父元素裏面占據的份數

order是設置子元素在伸縮盒子的父元素裏面的排序

flex-direction是調整主軸和側軸的方向 默認是row 可以改成column

align-self是設置特殊子元素的排序方式

CSS記錄