PPI或像素或其他用於高清屏幕上的媒體查詢？

我正在做一些塗鴉響應式設計（最後，對嗎？），並在使用媒體查詢時問自己一個問題：「當我在視網膜屏幕上使用它時會發生什麼？」。PPI或像素或其他用於高清屏幕上的媒體查詢？

所以我開始想知道在定位高清屏幕時是否仍然適合使用像素。我的意思是@media only screen and (min-width: 5 billion px)看起來像一個愚蠢的事情。

所以我想知道最佳實踐是什麼。 PX是否在HD屏幕上縮放？或者我應該使用DPI還是device-pixel-ratio或者完全不同的東西？

我的目標是針對僅限移動設備頁面的幾乎所有屏幕。純爲實踐目的，併爲自己看看什麼是可能的和合乎邏輯的。

我的問題非常多，如下所示：我如何在全面解決方案中將高清屏幕與「普通」屏幕區分開來，我可以爲「未來」打造的高清和普通高清屏幕制定例外。

來源

2013-03-18 CaptainCarl

@dystroy，如果你打算改變我的標題。請不要打錯字！ ;-) – CaptainCarl 2013-03-18 08:09:38

有人對他人的工作非常干擾：（ – 2013-03-18 08:12:04

對不起，但我擔心你的問題將被關閉，因爲模糊地標題爲「最佳實踐」是一個肯定的方式，因爲沒有建設性。 – 2013-03-18 08:12:25

通常使用em或%等相對單位。

例如，如果頁面中的所有內容都使用em，那麼更改主體的font-size將按比例自動縮放字體大小。

換句話說，您應該編碼分辨率範圍的媒體查詢，並根據屏幕寬度調整最上面的父字體大小（例如文檔主體），其餘樣式應該不在這些媒體查詢中，因爲字體大小的簡單更改將自動縮放整個頁面，因爲font-size已更改。

順便說一句，我懷疑min-width將永遠是「數十億像素」。目前，在消費者和大多數專業屏幕（4096x3113）中，resoultions不超過4K。也就是說，我認爲你不需要使用十億像素媒體查詢！

來源

2013-03-18 08:17:00

我必須承認，數十億像素是過分誇張的。然而，我正在尋找一種全方位的解決方案來瞄準較低清晰度的屏幕（例如普通手機）並專門針對高清屏幕。那麼適當的媒體查詢會是什麼？最小寬度2000像素？或者使用不同的措施。以百分比設置最小寬度不會很明顯。 – CaptainCarl 2013-03-18 08:29:27

@CaptainCarl嗯，當我指的是相關單元時，我所說的就是你需要在你的CSS規則中使用，以獲得完全響應式設計。 – 2013-03-18 08:30:40

@CapitalCarl關於媒體查詢本身，您應該使用範圍：最小寬度700 - 最大寬度1000 =>此規則，等等。 – 2013-03-18 08:31:28

好吧，160 DPI是屏幕PX密度的基準 - 因爲它是1：1屏幕PX到設備PX。視網膜顯示器是2：1屏幕PX到設備PX，它是320-330 DPI。

所以，如果你只是旨在使視網膜

工作

min-device-pixel-ratio: 2; 
min-resolution: 192dpi;

應該罰款。但是，Android例如支持具有不同DPI的一系列設備;包括160 DPI（「mdpi」），240 DPI（「hdpi」），320 DPI（「xhdpi」）以及之間。

編輯：添加下面的例子。

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.25), 
only screen and (min--moz-device-pixel-ratio: 1.25), 
only screen and (-o-min-device-pixel-ratio: 1.25/1), 
only screen and (min-device-pixel-ratio: 1.25), 
only screen and (min-resolution: 200dpi), 
only screen and (min-resolution: 1.25dppx) {}

來源

2013-03-18 08:17:57 Pfft

現在只支持WebKit：http://www.browsersupport.net/CSS/@media_%28-webkit-min-device-pixel-ratio%29 – 2013-03-18 08:19:19

請給他正確的瀏覽器支持鏈接。 Opera：http：//www.browsersupport。net/CSS/@ media_％28-o-min-device-pixel-ratio％29 - Firefox：http://www.browsersupport.net/CSS/@media_%28min--moz-device-pixel-ratio%29我的答案得到廣泛支持。 – Pfft 2013-03-18 08:37:33

我做了一個小搜索，我發現了。我錯了，世界並不完美！ – 2013-03-18 08:46:52

我假定您使用經由中繼檢視（或用於非WindowsPhone8 IE10，@ MS-視口）寬度=裝置寬度設置瀏覽器縮放的標準做法。

在這種情況下，您在寬度/高度媒體查詢中引用的CSS「px」單位將非常粗略地對應160ppi屏幕上的一個物理像素，而不管它是否爲高PPI。實際上它的範圍可以從〜130ppi到〜180ppi。

所以，如果你確定物理屏幕尺寸的這種不準確性，可以匹配你的寬度/高度「px」媒體查詢，請繼續前進。只要確保您可以將硬件開發人員定義的「css layout px」轉換爲幾乎所有現代移動設備上的「物理像素」縮放比例。

注意：也可以依靠一些聰明的javascript來從客戶端收集更準確的PPI讀數。我目前這樣做是爲了在移動設備和桌面設備上獲得統一的PPI值，考慮到目前所有非IE瀏覽器都可能會變得混亂（認爲桌面「頁面縮放」vs「視口縮放」vs「系統縮放」）有類似的問題卡在他們的錯誤跟蹤器，表明移動和桌面之間嚴重的建築分裂與像素縮放/縮放/比例/任何

來源

2013-03-18 08:51:41

PPI或像素或其他用於高清屏幕上的媒體查詢？

回答

相關問題