rem與@media screen and (max-width: px){ }

一、css經常使用的長度單位：px：像素單位這是一個固定單位、 %：百分比單位，參照單位參照父元素、 em:參照單位，參照父元素若是有定位就參照有定位的父元素，文本縮進（text-indent：）時使用，1em=16px，1em=一箇中文字符、 rem:參照單位參照根元素（html）的字體大小，手機端頁面一概用rem deg:角度單位，transform: rotate(45deg)：使相應的元素順時針方向旋轉45°。 二、：視口代碼，只要是作手機端頁面必須加這段代碼。 viewport：可視區域的窗口 width=device-width：可視區域窗口的大小等於設備的分辨率 initial-scale：初始的縮放比 maximum-scale：最大的縮放比 minimum-scale:最小的縮放比 user-scalable=no：不容許移動端用戶手動縮放。默認值爲yes 三、不一樣的手機頁面的元素大小是不一樣的因此要達到不一樣大小的手機用戶體驗要達到最好的rem這個單位就能達到這個效果，若是用像素單位尺寸就固定死了，元素的大小不會隨着分辨率的變化改變。例如谷歌瀏覽器根元素HTML默認字體大小font-size=16px這時1rem=16px,單位換算起來就很不方便因此咱們會規定一個新的HTML的font-size=100px覆蓋默認的font-size=16px，因此這時1rem=100px換算起來就會很方便。 四、主流參照機型設計稿大小： iphone5 320 * 568 DPR（設備的像素比）：2.0 設計稿:640 * 1136 iphone6 375 * 667 DPR ：2.0 設計稿:750 * 1334(最經常使用) iphone6P 414 * 736 DPR ：3.0 設計稿:1242 * 2208

五、參照iphone6設計稿 750 * 1334，當窗口改變時font-size是能夠計算的 窗口大小： 750 320 414 640 HTML{font-size} 100 ? ? ? 六、計算窗口變化的js代碼 七、css帶@的：@import"css文件":css導入式 @keyframes 動畫名稱{關鍵幀} @media screen and (max-width: px){ }：媒體查詢，有必定條件的覆蓋。 八、@media關鍵詞：一、@media：媒體、媒介；二、媒體類型：all(全部)、screen（設備）、print（打印設備）；三、鏈接符：and(和)、not(非)、only（僅僅）四、（判斷條件）：max-width、min-width；5{css代碼塊} 九、媒體查詢 （@media）會作到當窗口大小改變時頁面的結構會隨時改變{膜拜官網、華爲雲} 十、假設一個750 * 1334(最經常使用)的設計稿爲了方便計算咱們讓根元素font-size=100px，當窗口的大小改變時根元素font-size會改變，因此我麼就須要寫不少個媒體查詢區間而且不精準達不到徹底適配。因此就須要上邊的js代碼來計算窗口的大小，根元素font-size大小會隨時改變，就會達到移動端徹底適配。