## **移動端適配：** * rem:現在多數企業用的方案 * vw/vh:未來的適配方案 ## **主要的尺寸單位** **css像素：px** * 屏幕(顯示器)實際上是由一個一個的小點點構成的 * 不同屏幕的像索大小是不同的,像素越小的屏幕顯示的效果越清晰 * 所以同樣的200px在不同的設備下顯示效果不一樣 **百分比：%** * 可以將屬性值設置為相對于其義元素屬性的百分比 * 設置百分比可以使子元素跟隨父元素的改變而改變 **em** * em是相對于**父元素**的字體大小來計算的 * 1em= 1 個font-size 將元素的font-size設置為100px;則1em=100px  **rem** * em是相對于**根元素**（html）的字體大小來計算的 * 1em= 1個html的font-size（瀏覽器默認16px） 將html的font-size設置為100px;則1rem=100px >[danger]為啥不把根元素的font-size設置為1px，其他設置16rem？因瀏覽器默認16px且支持的最小font-sieze為12px **像素解惑：** 屏幕是由一個一個發光的小點構成,這一個個的小點就是像素 分辦率, 1920 x 1080說的就是屏幕中小點的數量 在前端開發中像素要分成兩種情況討論, css像素和物理像素 物理像素,上述所說的小點點就屬于構理像素 css像素,編寫網頁時,我們所用像素都是css像素 瀏覽器在顯示網頁時,需要將css像素轉換為物理像素然后再呈現 一個css像素最終由幾個物理像素顯示,由瀏覽器決定: 默認情況下在pc端,一個css像素 =一個物理像素 視口(viewpont) 視口就是屏幕中用來顯示網頁的區域 可以通過查看視口的大小,來觀察css像素和物理像素的比值 默認情況下（瀏覽器放大100%全屏）: 視口寬度1926px (css像素) 1920px (物理像素) 此時,css像索和物理像素的比是1:1 瀏覽器放大兩倍的情況: 視口寬度960px (css像索) 1920px (物理保素) -此時, css像素和物理像素的比是1：2（向100px×100px的圖片截圖后是200px×200px） [查看手機像素的網站](https://material.io/resources/devices) 移動端 在不同的屏幕,單位像素的大小是不同的,像素越小屏幕會越清晰 pc 24寸 1920x1080 iphone6 4.7寸 750 x1334 智能手機的像索點遠遠小于計算機的像索點 問題,一個寬度為900px的網頁在iphone6中要如何顯示呢? 設置div元素width:900px，iphone6手機訪問此div沒有填滿屏幕。  原因： 默認情況下,移動端的網頁都會將視口設置為980像素(css像素)以確保pc端網頁可以在移動端正常訪問,但是如果網頁的寬度超過980,移動端的瀏覽器會自動對網頁進行縮放以完整顯示網頁，但是體驗不好，大部分網站單獨為移動端設計網頁