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

資訊專欄INFORMATION COLUMN

前端開發中像素的概念

darcrand / 3173人閱讀

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

前端開發中像素的概念

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

何為像素


我們看到所顯示在屏幕上的圖像,實際上都是由非常多的像素點所組成。各個像素點通過發出不同顏色的光來呈現屏幕的色彩。

下面介紹一些和像素相關的概念

設備像素(物理像素)

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

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

CSS像素

CSS像素是web編程的概念,是相對的而不是絕對的單位，因為平常電腦屏幕1px對應了1px物理像素，所以感覺不到兩者的區別，會讓你誤以為CSS里的1px就是實際屏幕像素

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

設備像素（深藍色背景）和CSS像素（半透明前景）

當用戶進行縮小操作的時候:可以看到,一個設備像素覆蓋了多個CSS像素

當用戶進行放大操作的時候:可以看到一個CSS像素覆蓋了多個設備像素

小結:用戶的縮放比會影響單位CSS像素點對應的實際物理像素的多少,看到這里，你就應該知道，CSS像素只是一個相對單位，與物理像素并不總是等價的

此像素非彼像素

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

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


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

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

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

像素密度(PPI,Pixels Per Inch)

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

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

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

但是在現實中并沒有發生這種情況,因為:

也就是說,為了避免因為分辨率成倍提高造成的問題(高分辨率屏看網頁看不清楚),Retina屏幕將2x2的像素當做1個像素來使用。閱覽網頁的時候，iPhone 4/4S與3GS是一樣的顯示，但是畫質卻更加細膩了。

邏輯像素(dp,pt)

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

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

設備像素比（DPR，Device Pixel Ratio）

之前我們已經介紹了物理像素與邏輯像素的概念,就可以很容易推導出設備像素比的公式了

DRP = 物理像素/dp或pt

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

1個CSS像素相當于多少個物理像素,取決于:

頁面縮放比

屏幕密度

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

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

他們之間的換算比例是根據設備像素比來計算的

參考文章

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

移動端尺寸基礎知識

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

前端：移動開發 - 像素、viewport

移動端適配方案(上)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111869.html

相關文章

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

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

    王偉廷 評論0 收藏0

  • 前端：移動開發 - 像素、viewport

    摘要：表示單位面積上的物理像素點數目。比如原本像素高的頂部導航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發之的深入理解移動端尺寸基礎知識張鑫旭設備像素比簡單介紹 知識 CSS 像素、物理像素、PPI CSS 像素 CSS 像素 是 Web 編程的概念，本質上是為我們 Web 開發者創建的一個抽象結構，是相對的而不是絕對的。 物理像素 物理像素 是...

    QLQ 評論0 收藏0

  • 像素，css像素，物理像素，設備獨立像素，分辨率大亂斗

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

    LiveVideoStack 評論0 收藏0

  • Web移動開發基本概念

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

    vvpale 評論0 收藏0

發表評論

0條評論

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