畫素

螢幕是由一個一個發光的小點構成，這一個個的小點就是畫素
解析度:1920 x 1080說的就是螢幕中小點的數量
在前端開發中畫素要分成兩種情況討論:CSS畫素和物理畫素
物理畫素，上述所說的小點點就屬於物理畫素
CSS畫素，編寫網頁時，我們所用畫素都是CSS畫素

瀏覽器在顯示網頁時，需要將CSS畫素轉換為物理畫素然後再呈現
一個CSS畫素最終由幾個物理畫素顯示,由瀏覽器決定:
預設情況下在PC端，一個CSS畫素 = 一個物理畫素

視口（viewport)
視口就是螢幕中用來顯示網頁的區域
可以通過檢視視口的大小,來觀察CSS畫素和物理畫素的比值-預設情況下:
視口寬度 1920px (CSS畫素)
1920px（物理畫素)
此時，CSS畫素和物理畫素的比是 1:1

放大兩倍的情況:
視口寬度960px (CSS畫素)
1920px（物理畫素)
此時，CSS畫素和物理畫素的比是 1:2

我們可以通過改變視口的大小，來改變Css畫素和物理畫素的比值

在不通的螢幕,單位畫素的大小是不同的，畫素越小螢幕會越清晰

智慧手機的畫素點遠遠小於計算機的畫素點

問題：一個寬度為900px的網頁在iphone6中要如何顯示呢?
預設情況下，移動端的網頁都會將視口設定為980畫素（css畫素)
以確保pc端網頁可以在移動端正常訪問，但是如果網頁的寬度超過了980,
移動端的瀏覽器會自動對網頁縮放以完整顯示網頁

所以基本大部分的pc端網站都可以在移動端中正常瀏覽，但是往往都不會有一個好的體驗

移動端預設的視口大小是980px(css畫素)，
預設情況下，移動端的畫素比就是980/移動端寬度（980/750)
如果我們直接在網頁中編寫移動端程式碼，這樣在98o的視口下，畫素比是非常不好，
導致網頁中的內容非常非常的小
編寫移動頁面時，必須要確保有一個比較合理的畫素比:
1css畫素對應2個物理畫素
1css畫素對應3個物理畫素

可以通過meta標籤來設定視口大小

每一款移動裝置設計時，都會有一個最佳的畫素比,
一般我們只需要將畫素比設定為該值即可得到一個最佳效果
將畫素比設定為最佳畫素比的視口大小我們稱其為完美視口

將網頁的視口設定為完美視口

<meta name="viewport" content="width=device-width， initial-scale=1.0"">
 

放到title前面

所以在移動端開發時，就不能再使用px來進行佈局了

vw表示的是視口的寬度（viewport width)

• 100vw =一個視口的寬度
• 1vw =1%視口寬度

vw這個單位永遠相當於視口寬度進行計算