資訊專欄INFORMATION COLUMN
摘要：像素概念一般而言，像素是圖像的基本采樣單位。我們通常所說的顯示器分辨率，其實是指桌面設定的分辨率，而不是顯示器的物理分辨率。
小序
最近在做pc端、微信端、移動端app,公司的每個項目分別都有這三者，在pc端調試頁面，像素顯示都和預期效果的一樣，可是，微信頁面和手機頁面卻天差地別，在goole里調試得好好的，結果，真機看效果，用同事們的手機有不同的顯示效果，于是，對于像素單位有了興趣，近來，根據自己查到的資料，做一個總結。
像素(pixel)概念一般而言，pixel（像素）是圖像的基本采樣單位。詳細解釋見維基像素條目。所以它不是一個確定的物理量，也不是一個具體的點或者小方塊（盡管可以用點和小方塊來呈現），而是一個抽象概念。
CSS像素(css pixel)CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。
在CSS規范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。
按照CSS規范的定義，CSS中的px是一個相對長度，它相對的，是viewing device的分辨率。
設備像素(device pixel):設備像素設是物理概念，指的是設備中使用的物理像素。
不同的設備，其圖像基本單位是不同的，比如顯示器的點距，可以認為是顯示器的物理像素?，F在的液晶顯示器的點距一般在0.25mm到0.29mm之間。而打印機的墨點，也可以認為是打印機的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
我們通常所說的顯示器分辨率，其實是指桌面設定的分辨率，而不是顯示器的物理分辨率。只不過現在液晶顯示器成為主流，由于液晶的顯示原理與CRT不同，只有在桌面分辨率與物理分辨率一致的情況下，顯示效果最佳，所以現在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。
設備像素與CSS像素之間的換算一般來說，px就是對應設備的物理像素，然而如果輸出設備的解析度與電腦顯示器大不相同，輸出效果就會有問題。例如打印機輸出到紙張上，其解析度比電腦屏幕要高許多，如果不縮放，直接使用設備的物理像素，那電腦上的照片由600DPI的打印機打出來就比用顯示器看小了約6倍。
所以，CSS規定，在這種情況下，瀏覽器應該對像素值進行縮放調節，以保持閱讀體驗的大體一致。也就是要保持一定像素的長度在不同設備輸出上看上去的大小總是差不多。直接按照設備物理像素的大小進行換算當然是一個方式，但是CSS考慮得更多，它建議，轉換應按照“參考像素”（reference pixel）來進行。
眼睛看到的大小，取決于可視角度。而可視角度取決于物體的實際大小以及物體與眼睛的距離。10米遠處一個1米見方的東西，與1米遠處的10厘米見方的東西，看上去的大小差不多是一樣的，所謂一葉障目不見泰山，講的就是這個常識。
因此CSS規范使用視角來定義“參考像素”，1 參考像素即為從一臂之遙看解析度為96DPI的設備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。
請注意這個差別——CSS規范定義的參考像素并不是1/96英寸，而是1/96英寸在一臂之遙的看起來的視角。通常認為常人臂長為28英寸，所以其視角可以計算出來是0.0213度。（即(1/96)in / (28in 2 PI / 360deg) ）
我們在使用不同設備輸出時，眼睛與設備輸出的典型距離是不同的。比如iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以設備像素數為640 x 1136px，而CSS邏輯像素數為320 x 568px。
像素單位這里只分別列出一個常用的：
絕對(absolute)單位 pxpx單位名稱為像素，像素（px）是相對于顯示器屏幕分辨率而言的，而這種像素長度和你在顯示器上看到的文字屏幕像素無關。
而且在特定設備上總是一個近似值（原則是盡量接近參考像素）。
px實際上是一個按角度度量的單位。
1em指的是一個字體的大小，它會繼承父級元素的字體大小，因此并不是一個固定的值,起初排版度量時是基于當前字體大寫字母”M”的尺寸的。
不僅僅是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的整體性。
em指字體高，任意瀏覽器的默認字體高都是16px。所以,未經調整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。
em有如下特點:
1.em的值并不是固定的;
2.em會繼承父級元素的字體大小。
em巧用：
中文文章中，一般段首空兩格。如果用px作為單位，對12px字體來說需要空出24px，對14px字體來說需要空出28px……這樣換算非常不通用。如果用上em單位，這個問題就很好解決了，1個字的大小就是1em，那兩個字的大小就是2em。因此，只需這樣定義就行了：
p { text-indent: 2em; }
參考資料：
前端工程師需要明白的「像素」 文／阿樹（簡書作者）
像素（px）到底是個什么單位
CSS的長度單位
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115231.html
摘要：相對單位的值會根據外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...
摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業使用的單位，比如和有的是專門為發明的單位，比如。但是，由于目前低端打印機的每英寸點數為，而高端屏幕的每英寸點數為，因此所謂的高分辨率可能介于兩者之間。。 CSS中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...
摘要：所以，在網頁字體中，使用和單位是更好的解決方案。一般來說，我在開始寫網頁的時候，會設置標簽的字體大小為這樣標簽就是百分比的單位，然后再網頁接下來使用單位。 一、前言 在CSS樣式中，當文本縮放的時候使用font-size屬性是最難以理解的方面之一。在CSS中，你有4種不同的選擇，能夠讓你設置文本在瀏覽器中的展示。那么這4種單位哪一種更適合呢？這個問題引發了各種各樣不同的爭論和評價。想要...
摘要：前端開發中像素的概念最近在公司實習第一次正式接觸到設計師的設計稿我相信很多剛涉及移動端設計與開發的同學基本上會在前端開發中的像素問題上糾結很久，所以寫下這篇筆記，便于自己日后翻閱。 前端開發中像素的概念 最近在公司實習,第一次正式接觸到設計師的設計稿.我相信很多剛涉及移動端設計與開發的同學基本上會在前端開發中的像素問題上糾結很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯誤...
摘要：像素像素是一個相對單位。相對不同屏幕，其實際像素大小不同。解決方案直接使用實現的終端適配有興趣的小伙伴可以看下的解決方案使用實現手淘頁面的終端適配地址移動端適配單位的坑你知道多少關于移動端布局的一些總結 網頁尺寸單位 百分比（%） 英寸（in） 厘米（cm） 毫米（mm） 磅數（pt） 12 點活字（pc） 字母高度一半（ex） 父級字體（em） 像素（px） 根元素字體（rem） ...
閱讀 1534·2023-04-26 02:50
閱讀 3534·2023-04-26 00:28
閱讀 1931·2023-04-25 15:18
閱讀 3208·2021-11-24 10:31
閱讀 986·2019-08-30 13:00
閱讀 999·2019-08-29 15:19
閱讀 1766·2019-08-29 13:09
閱讀 2975·2019-08-29 13:06
