整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是Echa。
最近有不少的粉絲老鐵們私信我為啥這幾天沒有創作新內容了，實在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復了，奧密克戎BA.5其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現在小編就可以認認真真的繼續創作內容了。同時也非常感謝大家默默的關心我小編身體狀況，非常謝謝。
創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！
說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學習一下 CSS 中單位！
相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：
下面就來看看這些常見的CSS單位。
em是最常見的相對長度單位，適合基于特定的字號進行排版。根據CSS的規定，1em 等于元素的font-size屬性的值。
em 是相對于父元素的字體大小進行計算的。如果當前對行內文本的字體尺寸未進行顯示設置，則相對于瀏覽器的默認字體尺寸。當DOM元素嵌套加深時，并且同時給很多層級顯式的設置了font-size的值的單位是em，那么就需要層層計算，復雜度會很高。
當然，上面的這個說法是不嚴謹 的。來看一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 300px;
font-size: 20px;
}
.child {
border: 1em solid ;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
子元素
</div>
</div>
</body>
</html>
這里給父元素設置了字體大小為20px，然后給子元素的border寬度設置為1em，這時，子元素的border值為20px，確實是相對于父元素的字體大小設置的：
那如果我們給子元素的字體設置為30px：
.child {
font-size: 30px;
border: 1em solid ;
}
這時可以看到，子元素的邊框寬度就是30px，它是相對自己大小進行計算的：
所以，可以得出結論：如果自身元素是沒有設置字體大小的，那么就會根據其父元素的字體大小作為參照去計算，如果元素本身已經設置了字體，那么就會基于自身的字體大小進行計算。
em單位除了可以作用于 font-size之外，還可以運用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。
所以，em的使用還是比較復雜的，它可能會繼承任意一級父元素的字體大小。需要謹慎使用。
rem相對于em就簡單了很多，它是根據頁面的根元素（根元素）的字體大小來計算的。來對上面的例子進行修改：
.child {
font-size: 30px;
border: 1rem solid ;
}
html {
font-size: 25px;
}
效果如下，可以看到，邊框的長度變成了25px，它是根據根元素html的字體大小計算的：
如果沒有對根元素設定字號的話，font-size: 1rem的作用與font-size: initial相同。
使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時應使用 em，何時應使用 rem 呢？可以根據兩者的差異來進行選擇：
ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。
這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區域，移動端的視窗指的就是布局視窗。如果視窗大小發生了變化，那么這些值都會隨之變化。這四個單位指的是：
假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關。
vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。
這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創建全視區界面，例如移動設備的界面，因為元素是根據視區的尺寸而變化的，與文檔樹中的任何元素都沒有關系。
在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點數）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關系如下：
1in = 25.4mm = 2.54cm = 6pc = 72pt =96px
px 全稱為 Pixels，表示像素，它并不嚴格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據瀏覽器、操作系統或者硬件適當縮放，在某些設備或者用戶的分辨率設置下也會發生變化，但是96px通常等于一個物理英寸的大小。
CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網頁的其它元素排列起來。
很多時候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因為像素單位相對的是設備像素。在同一個設備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。
.box {
width: 100px;
height: 100px;
}
pt 全稱為 Point，表示點。常用于軟件設計和排版印刷行業（筆者做的前端系統，最終的產物就是一個需要拿去印刷的PDF，所以會經常用到這個單位）。當使用這個單位時，無論顯示器的分辨率是多少，打印在紙上的結果都是一樣的。
如果單純為了網頁的顯示，建議就使用px像素單位，如果需要輸出印刷產品，就可以考慮使用pt。
pc 全程為 Picas，表示派卡。相當于我國新四號鉛字的尺寸。派卡也是印刷的術語，1派卡等于12點。它和 px 的換算關系如下：
1pc = 16px
cm 全稱為 Centimeters，表示厘米。它和 px 的換算關系如下：
1cm = 37.8px
mm 全稱為 Millimeters，表示毫米。它和 px 的換算關系如下：
1mm = 3.78px
in 全稱為 Inches，表示英寸。它和 px 的換算關系如下：
1in = 96px
CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關系如下：
1kHz = 1000Hz
通常情況下，頻率單位使用在聽或說級聯樣式表中。頻率可以被用來改變一個語音閱讀文本的音調。低頻率就是低音，高頻率就是高音。
.low {
pitch: 105Hz;
}
.squeal {
pitch: 135Hz;
}
需要注意，當數值為0時，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時，不要直接寫0。另外，這兩個單位是不區分大小寫的。
CSS中的時間單位有兩個：秒（s）和毫秒（ms）。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關系如下：
1s = 1000ms
時間單位主要用于過度和動畫中，用于定義持續時間或延遲時間。下面兩種定義是等效的：
a[href] {
transition-duration: 2.5s;
}
a[href] {
transition-duration: 2500s;
}
CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負值。這三個單位的換算關系如下：
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
分辨率單位主要用于媒體查詢等操作。
dpi 全稱為 dots per inch，表示每英寸包含的點的數量。普通屏幕通常包含 72或96個點，大于 192dpi 的屏幕被稱為高分屏。
@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }
dpcm 全稱為 dots per centimeter，表示每厘米包含的點的數量。
@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }
dppx 全稱為 dots per pixel，表示每像素（px）包含點的數量。由于CSS px的固定比率為1:96，因此1dppx相當于96dpi。它對應于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。
@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }
CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關系如下：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
一般這些角度單位用于元素的旋轉操作，包括2D旋轉、3D旋轉等。
通常情況下，一個完整的旋轉就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時針旋轉420度（450deg）、逆時針旋轉270度（-270deg）、順時針旋轉90度（90deg）都是一樣的效果，都會歸為90deg。但是當使用動畫時，這些角度值就非常重要了。
CSS的旋轉主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉的角度即可。
除了旋轉會使用角度之外，線性漸變也會經常使用角度值：
background: linear-gradient(45deg, #000, #fff);
deg 全稱為 Degress，表示度，一個圓總共360度。
transform: rotate(2deg);
grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。
transform: rotate(2grad);
rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。
transform: rotate(2rad);
turn 全稱為 Turns，表示圈（轉），一個圓總共一圈（轉）。
transform:rotate(.5turn);
百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。
下面來看看常見場景中的百分比單位的使用。
在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時，參照物不盡相同：
在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時，參照物不盡相同：
在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：
CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設置百分比。
注意，在 translate 還有一個 z 軸的函數 translateZ() 。它是不接受百分比為單位的值。
輯導語：如何為一款產品制定合適的界面規則？隨著產品的迭代更新，作為設計師，則更需要在了解產品特性的情況下、設計出合理且有效的界面布局。本篇文章里，作者就對web產品設計適配選型做出介紹，并提出了他的看法。
現如今，幾乎所有的網頁設計都要進行響應式和自適應設計，才能讓產品能夠覆蓋到更多終端。接手一個產品設計的初期，制定界面適配規則時，你是否也有過如下疑問：
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（Static Layout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。
在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞——漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：Gmail和QQmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
QQmail就是CSS hack的完美體現。你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。
Gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能。用戶要求不斷提高，網站更加看重的是用戶體驗了。
所以，谷歌式的漸進增強被廣泛認可。結合自適應的思想，出現了響應式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢？依然是因為時代發展與生活方式的變遷：
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下。
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
用自適應技術（Adaptive），我們可以開發和提供不同的布局，來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集。
每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小。
當可視窗口改變時，不會出現橫向滾動條，UI、圖片、文字會自動縮放，元素內容、布局、交互方式基本不變。
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小。不同于百分比自適應的是，隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活地去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、CSS media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
1）R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320、480、760、960、1200、1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。否則頁面實現太過復雜也會影響整體體驗和頁面性能。
一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
2）選型
如何考慮實踐過程中的判斷呢？
一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。
于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源，這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層App化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題。總之，根據場景響應式可以從各種層面、各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）。
響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片、適配、UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
首先，我們需要了解幾種分辨率的差別。
PS：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率。
以一個SaaS類后臺產品為例。
對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景。每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
列（Column）用于對齊內容。
其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白，有助于分隔內容。
頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
用于組成柵格的列數稱為列結構。
8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。
12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D。
是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。
在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位。“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估。可借助的手段有刪格、網格規則等。設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
作者：神樂、沙拉；公眾號：酷家樂用戶體驗設計
本文由 @酷家樂用戶體驗設計 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
：物理像素
一個設備的像素，如果在同一個設備上，它的物理像素是固定的，當然這是廠商在出廠時就設置好的，也就是說一個設備的分辨率是固定的。
針對物理像素有沒有一個初步的理解呢？
二：邏輯像素
CSS像素，（層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。）
viewport（谷歌翻譯為：視）中的一個小方格，CSS樣式代碼中使用的是邏輯像素。如果在一個設備中，物理像素與邏輯像素相等，將不會產生任何問題。但是，在iphone 4中，物理像素是640px*960px，而邏輯像素數為320*480px。因此，需要使用大約4個物理像素來顯示一個CSS像素。
也就是說我們經常說的工程師尺寸就是邏輯像素，設計師尺寸就是物理像素。
三：像素比
物理像素與邏輯像素之間的比例。當像素比為1:1時，使用1個物理像素顯示1個邏輯像素；當像素比為2:1時，使用4個物理像素顯示1個邏輯像素。
四：CSS中的1px并不等于設備的1px
在CSS中一般使用px作為單位，（這個我們平時寫代碼的時候就在用，各位應該很熟悉了）在Web瀏覽器中CSS的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成一個錯覺，那就是CSS中的像素就是設備的物理像素。但實際情況卻并非如此，CSS中的像素只是一個抽象的單位，在不同的設備或不同的環境中，CSS中的1px所代表的設備物理像素是不同的。
在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320*480，在iphone3上，1個CSS像素確實是等于1個物理像素的。后來隨著技術的發展，移動設備的像素越來越高，從iphone4開始，推出了所謂的Retina屏，分辨率提高了一倍，變成640*960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，1個CSS像素是等于4個物理像素的。
五：實現真正的1物理像素
當viewport（谷歌翻譯為：視）的屬性initial-scale（谷歌翻譯為：初始規模）為1時，頁面大小正常，但initial-scale（谷歌翻譯為：初始規模）為0.5時，頁面被縮小了1倍，像素比為2:1的設備本來1個CSS像素寬度占2個物理像素寬度，縮小后的1個CSS像素寬度就只占1個物理像素，即實現了真正的1物理像素。
eg：border-width:1px并不是最小邊框，瀏覽器可以顯示的最小粒度比1px還要小。為什么會出現比border-width:1px更細的邊框？
屏幕能夠顯示的最小粒度是1個物理像素，iPhone4的像素比為2，設置border-width:1px后，邊框占了4個物理像素，如果能讓邊框的寬度為1物理像素，那么它就比1個CSS像素要細，這可以通過設置<meta name="viewport" content="width=device-width, initial-scale=0.5">。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
