成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS像素(css pixel)及像素單位 例如px pt em

mochixuan / 1081人閱讀

摘要：像素概念一般而言，像素是圖像的基本采樣單位。我們通常所說的顯示器分辨率，其實(shí)是指桌面設(shè)定的分辨率，而不是顯示器的物理分辨率。

小序

最近在做pc端、微信端、移動端app,公司的每個項(xiàng)目分別都有這三者，在pc端調(diào)試頁面，像素顯示都和預(yù)期效果的一樣，可是，微信頁面和手機(jī)頁面卻天差地別，在goole里調(diào)試得好好的，結(jié)果，真機(jī)看效果，用同事們的手機(jī)有不同的顯示效果，于是，對于像素單位有了興趣，近來，根據(jù)自己查到的資料，做一個總結(jié)。

像素(pixel)概念

一般而言，pixel（像素）是圖像的基本采樣單位。詳細(xì)解釋見維基像素條目。所以它不是一個確定的物理量，也不是一個具體的點(diǎn)或者小方塊（盡管可以用點(diǎn)和小方塊來呈現(xiàn)），而是一個抽象概念。

CSS像素(css pixel)

CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。
在CSS規(guī)范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。

按照CSS規(guī)范的定義，CSS中的px是一個相對長度，它相對的，是viewing device的分辨率。

設(shè)備像素(device pixel):

設(shè)備像素設(shè)是物理概念，指的是設(shè)備中使用的物理像素。
不同的設(shè)備，其圖像基本單位是不同的，比如顯示器的點(diǎn)距，可以認(rèn)為是顯示器的物理像素?，F(xiàn)在的液晶顯示器的點(diǎn)距一般在0.25mm到0.29mm之間。而打印機(jī)的墨點(diǎn)，也可以認(rèn)為是打印機(jī)的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

我們通常所說的顯示器分辨率，其實(shí)是指桌面設(shè)定的分辨率，而不是顯示器的物理分辨率。只不過現(xiàn)在液晶顯示器成為主流，由于液晶的顯示原理與CRT不同，只有在桌面分辨率與物理分辨率一致的情況下，顯示效果最佳，所以現(xiàn)在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。

設(shè)備像素與CSS像素之間的換算

一般來說，px就是對應(yīng)設(shè)備的物理像素，然而如果輸出設(shè)備的解析度與電腦顯示器大不相同，輸出效果就會有問題。例如打印機(jī)輸出到紙張上，其解析度比電腦屏幕要高許多，如果不縮放，直接使用設(shè)備的物理像素，那電腦上的照片由600DPI的打印機(jī)打出來就比用顯示器看小了約6倍。

所以，CSS規(guī)定，在這種情況下，瀏覽器應(yīng)該對像素值進(jìn)行縮放調(diào)節(jié)，以保持閱讀體驗(yàn)的大體一致。也就是要保持一定像素的長度在不同設(shè)備輸出上看上去的大小總是差不多。直接按照設(shè)備物理像素的大小進(jìn)行換算當(dāng)然是一個方式，但是CSS考慮得更多，它建議，轉(zhuǎn)換應(yīng)按照“參考像素”（reference pixel）來進(jìn)行。

眼睛看到的大小，取決于可視角度。而可視角度取決于物體的實(shí)際大小以及物體與眼睛的距離。10米遠(yuǎn)處一個1米見方的東西，與1米遠(yuǎn)處的10厘米見方的東西，看上去的大小差不多是一樣的，所謂一葉障目不見泰山，講的就是這個常識。

因此CSS規(guī)范使用視角來定義“參考像素”，1 參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點(diǎn)）時，1點(diǎn)（即1/96英寸）的視角。

請注意這個差別——CSS規(guī)范定義的參考像素并不是1/96英寸，而是1/96英寸在一臂之遙的看起來的視角。通常認(rèn)為常人臂長為28英寸，所以其視角可以計算出來是0.0213度。（即(1/96)in / (28in 2 PI / 360deg) ）

我們在使用不同設(shè)備輸出時，眼睛與設(shè)備輸出的典型距離是不同的。比如iPhone 5使用的是Retina視網(wǎng)膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以設(shè)備像素數(shù)為640 x 1136px，而CSS邏輯像素數(shù)為320 x 568px。

像素單位

這里只分別列出一個常用的：

絕對(absolute)單位 px

px單位名稱為像素，像素（px）是相對于顯示器屏幕分辨率而言的，而這種像素長度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。
而且在特定設(shè)備上總是一個近似值（原則是盡量接近參考像素）。
px實(shí)際上是一個按角度度量的單位。

相對(relative)單位 em

1em指的是一個字體的大小，它會繼承父級元素的字體大小，因此并不是一個固定的值,起初排版度量時是基于當(dāng)前字體大寫字母”M”的尺寸的。

不僅僅是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的整體性。

em指字體高，任意瀏覽器的默認(rèn)字體高都是16px。所以,未經(jīng)調(diào)整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

em有如下特點(diǎn):
1.em的值并不是固定的;
2.em會繼承父級元素的字體大小。

em巧用：
中文文章中，一般段首空兩格。如果用px作為單位，對12px字體來說需要空出24px，對14px字體來說需要空出28px……這樣換算非常不通用。如果用上em單位，這個問題就很好解決了，1個字的大小就是1em，那兩個字的大小就是2em。因此，只需這樣定義就行了：

p { text-indent: 2em; }
參考資料：

前端工程師需要明白的「像素」 文／阿樹（簡書作者）
像素（px）到底是個什么單位
CSS的長度單位

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115231.html

相關(guān)文章

  • 如何更愉快地使用em —— 別說你懂<em>CSSem>相對單位

    摘要：相對單位的值會根據(jù)外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點(diǎn)來了，使用相對單位聲明的值會由瀏覽器轉(zhuǎn)化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

    gekylin 評論0 收藏0

  • 聊一聊<em>CSSem>中的長度單位

    摘要：有的是日常生活中使用的單位，比如厘米和英寸有的是印刷行業(yè)使用的單位，比如和有的是專門為發(fā)明的單位，比如。但是，由于目前低端打印機(jī)的每英寸點(diǎn)數(shù)為，而高端屏幕的每英寸點(diǎn)數(shù)為，因此所謂的高分辨率可能介于兩者之間。。 CSS中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...

    史占廣 評論0 收藏0

  • <em>CSSem>字體單位

    摘要：所以，在網(wǎng)頁字體中，使用和單位是更好的解決方案。一般來說，我在開始寫網(wǎng)頁的時候，會設(shè)置標(biāo)簽的字體大小為這樣標(biāo)簽就是百分比的單位，然后再網(wǎng)頁接下來使用單位。 一、前言 在CSS樣式中，當(dāng)文本縮放的時候使用font-size屬性是最難以理解的方面之一。在CSS中，你有4種不同的選擇，能夠讓你設(shè)置文本在瀏覽器中的展示。那么這4種單位哪一種更適合呢？這個問題引發(fā)了各種各樣不同的爭論和評價。想要...

    GeekQiaQia 評論0 收藏0

  • 前端開發(fā)中像素的概念

    摘要：前端開發(fā)中像素的概念最近在公司實(shí)習(xí)第一次正式接觸到設(shè)計師的設(shè)計稿我相信很多剛涉及移動端設(shè)計與開發(fā)的同學(xué)基本上會在前端開發(fā)中的像素問題上糾結(jié)很久，所以寫下這篇筆記，便于自己日后翻閱。 前端開發(fā)中像素的概念 最近在公司實(shí)習(xí),第一次正式接觸到設(shè)計師的設(shè)計稿.我相信很多剛涉及移動端設(shè)計與開發(fā)的同學(xué)基本上會在前端開發(fā)中的像素問題上糾結(jié)很久，所以寫下這篇筆記，便于自己日后翻閱。如果有啥理解上的錯誤...

    darcrand 評論0 收藏0

  • 網(wǎng)頁單位和rem使用小結(jié)

    摘要：像素像素是一個相對單位。相對不同屏幕，其實(shí)際像素大小不同。解決方案直接使用實(shí)現(xiàn)的終端適配有興趣的小伙伴可以看下的解決方案使用實(shí)現(xiàn)手淘頁面的終端適配地址移動端適配單位的坑你知道多少關(guān)于移動端布局的一些總結(jié) 網(wǎng)頁尺寸單位 百分比（%） 英寸（in） 厘米（cm） 毫米（mm） 磅數(shù)（pt） 12 點(diǎn)活字（pc） 字母高度一半（ex） 父級字體（em） 像素（px） 根元素字體（rem） ...

    王巖威 評論0 收藏0

發(fā)表評論

0條評論

mochixuan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<