css 畫素
css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。
物理畫素
物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的螢幕解析度為 640×960，就表示螢幕的橫向有 640 個畫素點，縱向有 960 個畫素點。
ppippi（pixels per inch）表示單位面積上的物理畫素點數目。解析度可以表示螢幕包含的畫素數目，但要想描述螢幕的顯示質量，還需要知道螢幕尺寸，最後算出單位面積上的畫素點數目。顯然 ppi 越高，螢幕顯示效果越細膩。
想要解釋css 畫素和物理畫素的關係也很簡單，想想 pc 瀏覽器網頁上的縮放。如果使用者進行放大操作，乙個擁有width: 300px的元素將會占有螢幕越來越多的空間，以裝置（物理）畫素進行度量的話就會變得越來越寬。但對於 css 畫素來說，無論怎樣，寬度的值還是300px，縮放效果是通過盡可能的對 css 畫素進行拉伸來實現的。
平時電腦螢幕的 1px css 畫素對應 1px 物理畫素，所以感覺不到兩者的區別，會讓你誤以為css 裡的px就是實際螢幕畫素。而真實情況是：
下來的兩幅圖說明了當使用者縮放的時候會發生什麼。第一幅圖展示的是當使用者進行縮小操作的時候裝置畫素（深藍色背景）和 css 畫素（半透明前景）的樣子。css 畫素變得小了；乙個裝置畫素覆蓋了多個 css 畫素。第二幅圖展示的當使用者進行放大操作時候裝置畫素和css畫素的樣子。乙個css 畫素現在覆蓋了多個裝置畫素。（圖左：放大網頁，圖右：縮小網頁）
過去 iphone 3gs 解析度是 320x480，和平時電腦螢幕一樣，1px css 畫素對應 1px 物理畫素，開發者開發網頁時只要寫上 css 畫素width:320px, height:480px即可。但是，面對同樣螢幕尺寸的 iphone 4/4s，解析度提公升到 640x960，難道要另外為它寫乙份網頁文件設定 css 畫素width:640px, height:960px來適配高解析度嗎，顯然這是不實際的。如果繼續使用舊的網頁檔案，在高解析度的裝置上，就會顯得很小，比如在解析度為 320×480 的 iphone 3gs 上，要畫一條長度 1 英吋的線條，假設需要 163 個物理畫素，即 css畫素設成 163 畫素即可；但是在解析度為 640×960 的 iphone4/4s 上，163 個 css 畫素所在手機表示實際長度只有 iphone3gs 的一半，即 0.5 英吋。如果照這種方式顯示，3gs 上剛剛好的效果，在 4/4s 上就會小到根本看不清了。
但是在現實中，這兩台手機顯示的效果卻是一樣的！這是因為 retina 螢幕把 2x2 個畫素當 1 個畫素使用。比如原本 44 畫素高的頂部導航欄，在 retina 屏上用了 88 個畫素的高度來顯示。如下圖：
邏輯畫素
這裡提出邏輯畫素的概念。蘋果使用了一套邏輯座標系統來解決多解析度螢幕適配問題，
例如：4/4s 的邏輯畫素設為 320x480points，即物理螢幕上左上角為原點，橫向為 x 軸 320 points，縱向為 y 軸 480 points，名為 point（即pt）單位就是上圖中的深灰色部分，顯然，ppi 越高的螢幕，1 point 覆蓋的物理畫素就越多。android 平台也定義了邏輯畫素單位，為device-independent pixel即 dip 或 dp。說實話，兩者其實是一回事。
裝置畫素比
裝置畫素比（devicepixelratio）= 物理畫素 / dp或pt。例如：
iphone 4/4s 裝置畫素比：640 / 320 = 2
單位之間的換算關係：
1倍：1pt=1dp=1px（iphone 3gs）
2倍：1pt=1dp=2px（iphone 4s/5/6）
3倍：1pt=1dp=3px（iphone 6 plus）
也就是說：假設裝置畫素比為 2，設計圖要做成了 720x1280 的，那麼 css 裡所有尺寸都除以 2 即可。
而對於，比如一張實際大小 100x100px 的，並且 width 和 height 都設了 100px（注意這裡的 px 是 css pixel），實際占用了螢幕的畫素數就是（假設裝置畫素比是 3）300x300px（注意這裡的 px 是真實的螢幕畫素），也就是說，變模糊了。所以，如果希望網頁的元素在高 ppi 裝置上顯示不模糊（比如 1080x1920 螢幕的手機），位圖應該做 3 倍的尺寸（比如做 300x300px 的圖，然後在 css 中設 width 和 height 為 100px），svg（向量圖）就無所謂了。
注意這裡的 px 是指邏輯畫素，即 css 檔案中的 width、height。
max-width和max-device-width都可以使用。
@media all and (max-device-width: 320px) {}移動裝置上的瀏覽器認為自己必須能讓所有的**都正常顯示，即使是那些不是為移動裝置設計的**。但如果以瀏覽器的可視區域作為 viewport 的話，因為移動裝置的螢幕都不是很寬，所以那些為桌面瀏覽器設計的**放到移動裝置上顯示時，必然會因為移動裝置的 viewport 太窄，而擠作一團，甚至布局什麼的都會亂掉。所以這些瀏覽器就決定預設情況下把 viewport 設為乙個較寬的值，比如 980px，這樣的話即使是那些為桌面設計的**也能在移動瀏覽器上正常顯示了。ppk 把這個瀏覽器預設的 viewport 叫做 layout viewport。
layout viewport 的寬度是大於瀏覽器可視區域的寬度的，所以我們還需要乙個 viewport 來代表瀏覽器可視區域的大小，ppk 把這個 viewport 叫做 visual viewport。
圖一：布局擠在小小的螢幕中； 圖二：layout viewport 和 visual viewport
拿 iphone 舉例。
iphone 建立出了乙個 980px 的虛擬視窗——布局視窗（layout viewport）來對頁面布局，這時傳統的桌面端網頁終於能正常布局了（雖然要放大才能看清），但正是這個 layout viewport 導致專門根據螢幕尺寸和 devicepixelratio 優化過的頁面也只能以縮放的方式顯示（可以想象在你的 pc 瀏覽器寬 980px 視窗裡開啟乙個 320px 的頁面的情景...），那麼為了讓為移動裝置優化過的網頁正常顯示，就要改變這個 layout viewport。
移動開發 畫素知識
抽象單位 可以根據不同裝置關係來變大變小。而物理畫素是固定的，不會改變。例如 iphone5 1個css畫素 4個物理畫素 上圖中1136和640的單位是dp window.devicepixelratio是裝置上 物理畫素 和 裝置獨立畫素 dip或dp device independent pi...
移動前端開發
去掉輸入url控制項條 window.onload function script html,body body a,img mdn 手機網頁開發 mdn 在移動瀏覽器中使用viewport元標籤控制布局 移動前端開發和 web 前端開發的區別是什麼 移動前端端開發的入門理論 alloyteam移動...
前端 移動Web開發
在新的移動網際網路的浪潮中，移動web的份額將會逐漸超越pc端。什麼是移動web開發，其實就是將網頁更好的顯示在移動端的一些設定，簡單來說就兩點如下 流式布局 流式布局，也叫百分比布局，是移動端開發中經常使用的布局方式之一。流式布局的特徵 寬度自適應，高度寫死，並不是百分百還原設計圖。圖示都是固定死...