螢幕是由乙個乙個發光的小點構成，這乙個個的小點就是畫素
解析度：1920 x 1080說的就是螢幕中小點的數量
在前端開發中畫素要分成兩種情況討論：css畫素和物理畫素
上述所說的小點點就屬於物理畫素
編寫網頁時，我們所用畫素都是css畫素
瀏覽器在顯示網頁時，需要將css畫素轉換為物理畫素然後再呈現
乙個css畫素最終由幾個物理畫素顯示，由瀏覽器決定：
預設情況下在pc端，乙個css畫素 = 乙個物理畫素
筆記本很大可能的情況是因為設定了縮放，所以看起來不等
視口就是螢幕中用來顯示網頁的區域
可以通過檢視視口的大小，來觀察css畫素和物理畫素的比值
預設情況下：
視口寬度：
1920px（css畫素）1920px（物理畫素）
此時，css畫素和物理畫素的比是 1:1
放大兩倍的情況：
視口寬度：
960px（css畫素）1920px（物理畫素）
此時，css畫素和物理畫素的比是1:2
我們可以通過改變視口的大小，來改變css畫素和物理畫素的比值
在不同的螢幕，單位畫素的大小是不同的，畫素越小螢幕會越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334
智慧型手機的畫素點 遠遠小於 計算機的畫素點
問題：乙個寬度為900px的網頁在iphone6中要如何顯示呢？
預設情況下，移動端的網頁都會將視口設定為980畫素（css畫素）
以確保pc端網頁可以在移動端正常訪問，但是如果網頁的寬度超過了980
移動端的瀏覽器會自動對網頁縮放以完整顯示網頁
查詢移動端解析度
所以基本大部分的pc端**都可以在移動端中正常瀏覽，但是往往都不會有乙個好的體驗
為了解決這個問題，大部分**都會專門為移動端設計網頁
移動端預設的視口大小是980px(css畫素)
預設情況下，移動端的畫素比就是 980/移動端寬度 （980/750）
如果我們直接在網頁中編寫移動端**，這樣在980的視口下，畫素比是非常不好
導致網頁中的內容非常非常的小
編寫移動頁面時，必須要確保有乙個比較合理的畫素比：
1css畫素 對應 2個物理畫素
1css畫素 對應 3個物理畫素
可以通過meta標籤來設定視口大小
每一款移動裝置設計時，都會有乙個最佳的畫素比
一般我們只需要將畫素比設定為該值即可得到乙個最佳效果
將畫素比設定為最佳畫素比的視口大小我們稱其為完美視口
將網頁的視口設定為完美視口
結論：以後再寫移動端的頁面，就把上邊這個玩意先寫上
不同的裝置完美視口的大小是不一樣的
iphone6 -- 375
iphone6plus -- 414
所以在移動端開發時，就不能再使用px來進行布局了
vw表示的是視口的寬度（viewport width）
100vw = 1個視口的寬度
1vw = 1%視口寬度
vw 這個單位永遠相當於視口寬度進行計算
建立乙個 48px x 35px 大小的元素
100vw = 750px(設計圖的畫素) 0.1333333333333333vw = 1px
6.4vw = 48px(設計圖畫素)
4.667vw = 35px
網頁中字型大小最小是12px，不能設定乙個比12畫素還小的字型
如果我們設定了乙個小於12px的字型，則字型自動設定為12px
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...
移動端適配
不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...
移動端適配
無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...