成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

QLQ / 1709人閱讀

摘要：表示單位面積上的物理像素點數(shù)目。比如原本像素高的頂部導(dǎo)航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發(fā)之的深入理解移動端尺寸基礎(chǔ)知識張鑫旭設(shè)備像素比簡單介紹

知識 CSS 像素、物理像素、PPI CSS 像素

CSS 像素 是 Web 編程的概念，本質(zhì)上是為我們 Web 開發(fā)者創(chuàng)建的一個抽象結(jié)構(gòu)，是相對的而不是絕對的。

物理像素

物理像素 是物理概念，屏幕是由很多像素點組成的，各像素點通過發(fā)出不同顏色的光來呈現(xiàn)屏幕的色彩。它是物理的，隨著設(shè)備生產(chǎn)出來就已經(jīng)被確定下來了，比如 iPhone4 的屏幕分辨率為 640×960，就表示屏幕的橫向有 640 個像素點，縱向有 960 個像素點。

PPI

PPI（Pixels Per Inch）表示單位面積上的物理像素點數(shù)目。分辨率可以表示屏幕包含的像素數(shù)目，但要想描述屏幕的顯示質(zhì)量，還需要知道屏幕尺寸，最后算出單位面積上的像素點數(shù)目。顯然 PPI 越高，屏幕顯示效果越細膩。

想要解釋 CSS 像素 和 物理像素 的關(guān)系也很簡單，想想 PC 瀏覽器網(wǎng)頁上的縮放。如果用戶進行放大操作，一個擁有 width: 300px 的元素將會占有屏幕越來越多的空間，以設(shè)備（物理）像素進行度量的話就會變得越來越寬。但對于 CSS 像素來說，無論怎樣，寬度的值還是 300px，縮放效果是通過盡可能的對 CSS 像素進行拉伸來實現(xiàn)的。

平時電腦屏幕的 1px CSS 像素對應(yīng) 1px 物理像素，所以感覺不到兩者的區(qū)別，會讓你誤以為CSS 里的 px 就是實際屏幕像素。而真實情況是：

當(dāng)縮放比例為 100% 時（不縮放），1px CSS 像素對應(yīng)屏幕物理像素 1px；

當(dāng)縮放比例大于 100% 時（放大），1px CSS 像素對應(yīng)大于 1px 的屏幕物理像素；

當(dāng)縮放比例小于 100% 時（縮小），1px CSS 像素對應(yīng)小于 1px 的屏幕物理像素。

下來的兩幅圖說明了當(dāng)用戶縮放的時候會發(fā)生什么。第一幅圖展示的是當(dāng)用戶進行縮小操作的時候設(shè)備像素（深藍色背景）和 CSS 像素（半透明前景）的樣子。CSS 像素變得小了；一個設(shè)備像素覆蓋了多個 CSS 像素。第二幅圖展示的當(dāng)用戶進行放大操作時候設(shè)備像素和CSS像素的樣子。一個CSS 像素現(xiàn)在覆蓋了多個設(shè)備像素。（圖左：放大網(wǎng)頁，圖右：縮小網(wǎng)頁）

邏輯像素、設(shè)備像素比

過去 iPhone 3gs 分辨率是 320x480，和平時電腦屏幕一樣，1px CSS 像素對應(yīng) 1px 物理像素，開發(fā)者開發(fā)網(wǎng)頁時只要寫上 CSS 像素 width:320px, height:480px 即可。但是，面對同樣屏幕尺寸的 iPhone 4/4s，分辨率提升到 640x960，難道要另外為它寫一份網(wǎng)頁文檔設(shè)置 CSS 像素 width:640px, height:960px 來適配高分辨率嗎，顯然這是不實際的。如果繼續(xù)使用舊的網(wǎng)頁文件，在高分辨率的設(shè)備上，就會顯得很小，比如在分辨率為 320×480 的 iPhone 3GS 上，要畫一條長度 1 英寸的線條，假設(shè)需要 163 個物理像素，即 CSS像素設(shè)成 163 像素即可；但是在分辨率為 640×960 的 iPhone4/4s 上，163 個 CSS 像素所在手機表示實際長度只有 iPhone3GS 的一半，即 0.5 英寸。如果照這種方式顯示，3GS 上剛剛好的效果，在 4/4s 上就會小到根本看不清了。

但是在現(xiàn)實中，這兩臺手機顯示的效果卻是一樣的！這是因為 Retina 屏幕把 2x2 個像素當(dāng) 1 個像素使用。比如原本 44 像素高的頂部導(dǎo)航欄，在 Retina 屏上用了 88 個像素的高度來顯示。如下圖：

邏輯像素

這里提出邏輯像素的概念。蘋果使用了一套邏輯坐標系統(tǒng)來解決多分辨率屏幕適配問題，
例如：4/4s 的邏輯像素設(shè)為 320x480 points ，即物理屏幕上左上角為原點，橫向為 X 軸 320 points，縱向為 Y 軸 480 points，名為 point（即pt）單位就是上圖中的深灰色部分，顯然，PPI 越高的屏幕，1 point 覆蓋的物理像素就越多。Android 平臺也定義了邏輯像素單位，為device-independent pixel 即 dip 或 dp。說實話，兩者其實是一回事。

設(shè)備像素比

設(shè)備像素比（devicePixelRatio）= 物理像素 / dp或pt。例如：
iPhone 4/4s 設(shè)備像素比：640 / 320 = 2

單位之間的換算關(guān)系：

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）
應(yīng)用 CSS 和 圖片

對于開發(fā)者，實際應(yīng)用中應(yīng)該根據(jù)屏幕尺寸和 設(shè)備像素比（devicePixelRatio）來反推 CSS pixel。

也就是說：假設(shè)設(shè)備像素比為 2，設(shè)計圖要做成了 720x1280 的，那么 CSS 里所有尺寸都除以 2 即可。

而對于圖片，比如一張實際大小 100x100px 的圖片，并且 width 和 height 都設(shè)了 100px（注意這里的 px 是 css pixel），實際占用了屏幕的像素數(shù)就是（假設(shè)設(shè)備像素比是 3）300x300px（注意這里的 px 是真實的屏幕像素），也就是說，變模糊了。所以，如果希望網(wǎng)頁的元素在高 PPI 設(shè)備上顯示不模糊（比如 1080x1920 屏幕的手機），位圖應(yīng)該做 3 倍的尺寸（比如做 300x300px 的圖，然后在 CSS 中設(shè) width 和 height 為 100px），svg（矢量圖）就無所謂了。

媒體查詢

注意這里的 px 是指邏輯像素，即 CSS 文件中的 width、height。
max-width 和 max-device-width 都可以使用。

@media all and (max-device-width: 320px) {}
Viewport

別以為當(dāng)我們?yōu)榱诉m配手機端的問題，而特意根據(jù)屏幕尺寸和 devicePixelRatio 來反推 CSS pixel，就可以在手機端上優(yōu)雅地顯示網(wǎng)頁了，手機瀏覽器又涉及到有關(guān) viewport 的概念。這里介紹一下 layout viewport 和 visual viewport。

Layout viewport - 渲染視圖，渲染頁面所需要的尺寸

Visual viewport - 視覺視圖，瀏覽器可視區(qū)域尺寸

Layout viewport

移動設(shè)備上的瀏覽器認為自己必須能讓所有的網(wǎng)站都正常顯示，即使是那些不是為移動設(shè)備設(shè)計的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為 viewport 的話，因為移動設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計的網(wǎng)站放到移動設(shè)備上顯示時，必然會因為移動設(shè)備的 viewport 太窄，而擠作一團，甚至布局什么的都會亂掉。所以這些瀏覽器就決定默認情況下把 viewport 設(shè)為一個較寬的值，比如 980px，這樣的話即使是那些為桌面設(shè)計的網(wǎng)站也能在移動瀏覽器上正常顯示了。ppk 把這個瀏覽器默認的 viewport 叫做 layout viewport。

Visual viewport

layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個 viewport 來代表瀏覽器可視區(qū)域的大小，ppk 把這個 viewport 叫做 visual viewport。

圖一：布局擠在小小的屏幕中； 圖二：Layout viewport 和 Visual viewport

拿 iPhone 舉例。
iPhone 創(chuàng)建出了一個 980px 的虛擬窗口——布局窗口（layout viewport）來對頁面布局，這時傳統(tǒng)的桌面端網(wǎng)頁終于能正常布局了（雖然要放大才能看清），但正是這個 layout viewport 導(dǎo)致專門根據(jù)屏幕尺寸和 devicePixelRatio 優(yōu)化過的頁面也只能以縮放的方式顯示（可以想象在你的 PC 瀏覽器寬 980px 窗口里打開一個 320px 的頁面的情景...），那么為了讓為移動設(shè)備優(yōu)化過的網(wǎng)頁正常顯示，就要改變這個 layout viewport。

布局窗口定義為：寬度為設(shè)備寬度，初始縮放比例為 1 倍，禁止用戶縮放。

參考

ppk: A pixel is not a pixel is not a pixel

W3cplus 譯：此像素非彼像素

JeremyWei 譯：不是像素的像素不是像素

移動前端開發(fā)之viewport的深入理解

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

張鑫旭：設(shè)備像素比devicePixelRatio簡單介紹

SCREENSIZ.ES

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111341.html

相關(guān)文章

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

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

    vvpale 評論0 收藏0

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

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

    ivan_qhz 評論0 收藏0

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

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

    xiaoqibTn 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

  • 茴字的四種寫法—移動適配方案的進化

    摘要：是阿里團隊開發(fā)的前端適配方案，也是用的的方法。那么第一種方法其實已經(jīng)能解決前端適配問題了，為什么阿里還要開發(fā)一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統(tǒng)化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...

    Pocher 評論0 收藏0

發(fā)表評論

0條評論

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