国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

darcrand / 3166人閱讀

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

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

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

何為像素


我們看到所顯示在屏幕上的圖像,實(shí)際上都是由非常多的像素點(diǎn)所組成。各個像素點(diǎn)通過發(fā)出不同顏色的光來呈現(xiàn)屏幕的色彩。

下面介紹一些和像素相關(guān)的概念

設(shè)備像素(物理像素)

它是物理上的概念，隨著設(shè)備生產(chǎn)出來就已經(jīng)被確定了。例如iPhone5的分辨率是640x1136px,代表屏幕由640行,1136列像素點(diǎn)組成。

小知識:屏幕普遍采用RGB色域(紅、綠、藍(lán)三個子像素構(gòu)成),而印刷行業(yè)普遍使用CMYK色域(青、品紅、黃和黑)

CSS像素

CSS像素是web編程的概念,是相對的而不是絕對的單位，因?yàn)槠匠ｋ娔X屏幕1px對應(yīng)了1px物理像素，所以感覺不到兩者的區(qū)別，會讓你誤以為CSS里的1px就是實(shí)際屏幕像素

事實(shí)上只有zoom 100%的情況下,1個CSS像素才會等于1個設(shè)備像素

設(shè)備像素（深藍(lán)色背景）和CSS像素（半透明前景）

當(dāng)用戶進(jìn)行縮小操作的時候:可以看到,一個設(shè)備像素覆蓋了多個CSS像素

當(dāng)用戶進(jìn)行放大操作的時候:可以看到一個CSS像素覆蓋了多個設(shè)備像素

小結(jié):用戶的縮放比會影響單位CSS像素點(diǎn)對應(yīng)的實(shí)際物理像素的多少,看到這里，你就應(yīng)該知道，CSS像素只是一個相對單位，與物理像素并不總是等價(jià)的

此像素非彼像素

正如這篇文章的前端工程師需要明白的「像素」開頭中的場景，這簡直是跟我剛開始實(shí)習(xí)的時候場景一模一樣。

阿樹：哇靠，為啥你給的設(shè)計(jì)稿是640px寬 ，iPhone 5不是320px寬嗎？？？


玉鳳：A pixel is not a pixel is not a pixel, you know ?

事實(shí)上，他們都是對的，只是談到的不是同一個“像素”。在上一章節(jié)中我們介紹了,CSS像素并不總等于物理像素。

我們知道,iPhone 3GS的屏幕和iPhone 4/4s都是3.5英寸的。過去iPhone 3GS的時候,和平時電腦屏幕一樣,在縮放比為100%的情況下,1px CSS像素對應(yīng)著1px物理像素。開發(fā)者在開發(fā)網(wǎng)頁的時候只需要寫上CSS像素width:320px,height:480px。但是面對同樣屏幕尺寸的iPhone4/4s,分辨率提升到了640x960，整整比3GS的分辨率大了一倍。在相同的屏幕尺寸下塞入更多的像素點(diǎn)，這需要引入另一個重要的概念：

像素密度(PPI,Pixels Per Inch)

像素密度，準(zhǔn)確的說是每平方英寸的面積上排列的像素點(diǎn)數(shù)量。1英寸是一個固定長度，等于2.54厘米。像素密度越高，代表屏幕顯示效果越精細(xì)。

看到這里可能你會困惑，如果像素密度提高了一倍的話，那么原本顯示正常的網(wǎng)頁豈不是變得非常的小？

比如在分辨率為320x480的iPhone 3GS上，要畫一條1英寸的線條，假設(shè)需要163像素,即CSS像素設(shè)成 163 像素即可；但是在分辨率為 640×960 的 iPhone4/4s 上，163 個 CSS 像素所在手機(jī)表示實(shí)際長度只有 iPhone3GS 的一半，即 0.5 英寸。如果照這種方式顯示，3GS 上剛剛好的效果，在 4/4s 上就會小到根本看不清了。

但是在現(xiàn)實(shí)中并沒有發(fā)生這種情況,因?yàn)?

也就是說,為了避免因?yàn)榉直媛食杀短岣咴斐傻膯栴}(高分辨率屏看網(wǎng)頁看不清楚),Retina屏幕將2x2的像素當(dāng)做1個像素來使用。閱覽網(wǎng)頁的時候，iPhone 4/4S與3GS是一樣的顯示，但是畫質(zhì)卻更加細(xì)膩了。

邏輯像素(dp,pt)

為了抹去高密度分辨率屏幕(高清屏)所帶來的適配問題,iOS與Android兩個平臺分別提出了pt（point）與dp(device-independent pixel)兩個單位。他們的名稱不一樣，但是內(nèi)涵是一樣的。下面我們以iPhone為例

例如將4/4s的邏輯像素設(shè)定為320x480pt（實(shí)際像素:640x960px）,以物理屏幕左上角為原點(diǎn),橫向X軸320pt,縱向Y軸480pt。所以PPI越高，1pt的所覆蓋的物理像素就越多。

設(shè)備像素比（DPR，Device Pixel Ratio）

之前我們已經(jīng)介紹了物理像素與邏輯像素的概念,就可以很容易推導(dǎo)出設(shè)備像素比的公式了

DRP = 物理像素/dp或pt

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）
總結(jié)

1個CSS像素相當(dāng)于多少個物理像素,取決于:

頁面縮放比

屏幕密度

所以設(shè)計(jì)師給的是640px寬的設(shè)計(jì)稿是根據(jù)設(shè)備像素(device pixel,物理像素)為單位制作的設(shè)計(jì)稿;而前端工程師參照相關(guān)的設(shè)備像素比來進(jìn)行換算

比如根據(jù)iPhone5出稿的設(shè)計(jì)稿的中有一個width:100px,height:200px的按鈕
那么前端工程師在編碼web頁面時應(yīng)該寫width:50px,height:100px.

他們之間的換算比例是根據(jù)設(shè)備像素比來計(jì)算的

參考文章

前端工程師需要明白的「像素」

移動端尺寸基礎(chǔ)知識

(全解析)屏幕尺寸，分辨率，像素，PPI之間到底什么關(guān)系？

前端：移動開發(fā) - 像素、viewport

移動端適配方案(上)

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

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

相關(guān)文章

  • 高清屏概念解析與檢測設(shè)備像素比的方法

    摘要：高清屏概念解析和前端開發(fā)的關(guān)系高清屏概念解析高清屏概念的興起主要是從喬幫主發(fā)布設(shè)備開始興起。還好我們有一個叫設(shè)備像素比的東西來檢測當(dāng)前屏幕是不是屬于高清屏幕。 前言 做移動端h5開發(fā)很久了，從開始入行到現(xiàn)在。很多知識和工具都是在用前輩留下的遺產(chǎn)，都沒有深入的研究過原因，了解為什么要這么去做。 也許自己也是過了交給自己做什么就做什么的階段了。在國慶節(jié)有一個大塊的時間，把最近看到的知識總結(jié)...

    王偉廷 評論0 收藏0

  • 前端：移動開發(fā) - 像素、viewport

    摘要：表示單位面積上的物理像素點(diǎn)數(shù)目。比如原本像素高的頂部導(dǎo)航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發(fā)之的深入理解移動端尺寸基礎(chǔ)知識張鑫旭設(shè)備像素比簡單介紹 知識 CSS 像素、物理像素、PPI CSS 像素 CSS 像素 是 Web 編程的概念，本質(zhì)上是為我們 Web 開發(fā)者創(chuàng)建的一個抽象結(jié)構(gòu)，是相對的而不是絕對的。 物理像素 物理像素 是...

    QLQ 評論0 收藏0

  • 像素，css像素，物理像素，設(shè)備獨(dú)立像素，分辨率大亂斗

    摘要：我們用小米舉例，屏幕像素物理像素為，設(shè)備獨(dú)立像素為，也就是說，一個設(shè)備獨(dú)立像素就包含個物理像素，同時我們能得出。 本文主要闡述移動端布局中常遇到的一些基本概念，這些概念也適用于PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設(shè)備獨(dú)立像素（devicedependent pixel） 像素 像素是圖像顯示的基本單位，同時...

    LiveVideoStack 評論0 收藏0

  • Web移動開發(fā)基本概念

    摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    vvpale 評論0 收藏0

發(fā)表評論

0條評論

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