在前端開發過程中,必須會用的單位是畫素px

畫素可分為物理畫素和CSS畫素.

物理畫素:我們的頁面展示在數字顯示屏上,如果我們仔細觀察手機或者電腦能發現,顯示器是由一格一格的正方形組成,而這個正方形就是裝置上顯示的最小單位

CSS畫素:就是我們在寫樣式時用到的比如width:100px.

解析度:單位長度中，所表達或擷取的畫素數目.

PC端:如果你的電腦設定了解析度是1920*1080,那麼你的顯示器一行就是1920px,如果你的佈局大於1920在你的顯示器上就會換行,如果設定的是1280*768,那麼你的佈局一行超過1280px就會換行(當然瀏覽器正常情況下是不會全屏的,會損失一些畫素,只有在全屏的模式下瀏覽器的寬度才等於螢幕寬度,可以F11全屏模式,window.innerWidth去獲取寬度),如果你的電腦還設定了縮放比例,那麼螢幕能顯示的畫素=解析度/縮放比例,如果是1920的就只能顯示1536了

手機端:手機端的解析度都是設定好的,比如iphone6的解析度是750*1334但是css畫素卻是375*667,原因就是iphone是兩倍屏也就是他的縮放比例是200%

CSS畫素和物理畫素的關係