畫素

畫素

---

螢幕是由一個一個發光的小點構成，這一個個的小點就是畫素；
解析度說的就是螢幕中小點的數量；
在前端開發中畫素要分成兩種情況討論：CSS畫素、物理畫素；
物理畫素： 上述所說的小點就是物理畫素；
CSS畫素： 編寫網頁時，我們所用的畫素就是CSS畫素；
-瀏覽器在顯示網頁時，需要將CSS畫素轉換為物理畫素然後呈現；
-一個CSS畫素最終由幾個物理畫素顯示由瀏覽器決定；
預設情況下在PC端，一個CSS畫素=一個物理畫素；

手機畫素

---

在不同的螢幕下單位畫素的大小是不同的，畫素越小螢幕會越清晰；
查解析度；
智慧手機的畫素點遠小於計算機的畫素點；
預設情況下，移動端的網頁都會將視口設定為980px（CSS畫素），以確保PC端網頁可以再移動端正常訪問，但是如果網頁的寬度超過了980，移動端的瀏覽器會自動對網頁縮放以完整顯示網頁；
基本大部分的PC端網站都可以在移動端中正常瀏覽，但是往往使用者都不會有一個好的體驗，為解決這個問題，大部分網頁都會專門為移動端設計；

視口

視口

---

就是螢幕中用來顯示網頁的區域；
可以通過檢視視口來觀察CSS畫素和物理畫素的比值；
預設情況下：
視口寬度 1920px（CSS畫素）；1920px（物理畫素）；此時CSS畫素和物理畫素的比值是1:1；
放大兩倍情況下：
視口寬度 960px（CSS畫素）；1920px（物理畫素）；此時CSS畫素和物理畫素的比值是1:2；
可以通過改變視口的大小來改變CSS畫素和物理畫素；

完美視口

---

移動端預設的視口大小是980px（CSS畫素）；
預設情況下，移動端的畫素就是980/移動端寬度；
如果直接在網頁中編寫移動端程式碼，這樣在980的視口下，畫素比非常不好，導致網頁中的內容非常的小；
編寫移動端頁面時，必須要確保有一個比較合適的畫素比；
一個CSS畫素對應一個物理畫素；
可以通過meta標籤來設定視口大小；
移動端：
<meta name="viewport" conent="width=200px，initial-scale=1.0">
每一款移動裝置設計時，都會有一個最佳畫素比，一般只需要將畫素比設定該畫素即可得到一個最佳效果，將畫素比設定為最佳畫素比的視口大小稱為完美視口；

vw

vw單位

---

由於不同裝置視口和畫素比不同，所以同樣的375個畫素在不同的裝置下意義是不一樣，所以在移動端開發時，就不能再使用PX來進行佈局；
vw單位表示視口的寬度（viewport width）：
100vw=一個視口的寬度
1vw=1%
vw這個單位永遠相對於視口寬度進行計算；

vw適配

1rem=1html的字型大小，設定了不一定生效，網頁中字型大小最小是12px，不能設定一個比12畫素還小的字型；