什麼是與CSS的dp（密度獨立像素）單位？

對於Android，人們建議使用DP（密度獨立像素）的UI元素的測量，並有存在，如使用48dp爲按鈕的高度我工作的一個Web應用程序約定，等什麼是與CSS的dp（密度獨立像素）單位？

，並我在UI設計上受到很多批評，認爲它不符合Android設計標準。很明顯，我的應用程序看起來會有所不同，因爲它使用的是CSS和HTML，而不是Android Holo主題，但我仍然希望儘可能使其符合要求。但CSS不允許密度獨立測量。

當我測試在不同的分辨率和像素密度的應用程序，它看起來並不好，有時，它是出路比例，因此它甚至不是功能。 CSS沒有像本地開發那樣的dp單元，但我想知道一些替代方法。

我能以某種方式使用Javascript獲取像素密度並手動縮放所有內容嗎？製作網頁應用程序的最佳方式是什麼，它能夠很好地處理所有的分辨率/密度？

2013-05-06 Brad

CSS的'px'與Android上的'dp'相同。 [根據CSS3規範。單位和價值]（http://www.w3.org/TR/css3-values/#absolute-lengths）。 – omninonsense 2015-07-30 06:35:29

http://www.w3.org/TR/css3-values/#lengths

在CSS提供的最接近的單位是視百分比單位。

vw - 等於初始包含塊寬度的1％。
vh - 等於初始包含塊高度的1％。
vmin - 等於vw或vh中的較小值。
vmax - 等於vw或vh中的較大值。

唯一需要注意的是不支持這些單元的移動瀏覽器是Opera。 http://caniuse.com/#feat=viewport-units

來源

2013-05-06 01:46:37 cimmanon

這些單位在iOS中部署時是否正確顯示？ – jmhostalet 2014-04-24 14:13:05

@jmhostalet不，它會導致瀏覽器進入某種無限循環，因爲視口高度是動態的。 – rookie1024 2014-11-08 04:45:28

基於rem單元的界面怎麼樣？

我沒有足夠的經驗對此事進行確認，但我認爲你可以使基於視窗的大小一些數學在根元素應用字體大小和整個界面會進行相應的調整。這東西對我來說有點巫術。

來源

2014-07-24 15:56:41

我以前用過這個，並且取得了很好的成功。 – 2015-10-09 01:39:58

您不需要設置字體大小。根元素的默認字體大小通常是手頭設備的一個相當合理的選擇。 – 2015-10-09 01:51:55

在CSS3中，說網絡沒有Android的px可能更準確。 The spec for CSS3's px這樣說：

像素; 1px等於1in的1/96。

px可能是您想要的測量，在將來。

來源

2015-02-17 05:22:18 uber5001

我看不出如何在不破壞一切的情況下實現這種轉變。在手機和臺式電腦上使用相同的絕對尺寸（以釐米爲單位）並不是一個好的範例。 – 2015-10-09 01:44:00

而1in被定義爲96px。像in，mm這樣的CSS單位是依賴於像素密度的。 – 2016-05-15 09:58:07

我不同意當前接受的答案。根據uber5001的建議，px是一個固定的單元，與Android-specifc dp的努力類似。

每Material's spec：

當編寫CSS，使用PX無論DP或SP陳述。 Dp只需要用於Android開發。

來源

2015-07-30 04:51:45 Tohuw

+12

這是答案。 +1用於引用材料規格。 – Qix 2015-07-31 22:11:00

-1，px不是固定單位。 1px = 1in的1/96，但1in = 96px。像素是基本單位，而不是英寸。是的，這很奇怪，但我真的測試過它。我將元素尺寸從px更改爲mm，並且它在桌面和移動設備上的顯示方式之間的比例沒有任何變化。接受的答案是最正確的。 – 2016-05-15 09:57:36

來自MDN：「單位不代表屏幕上的物理英寸，但代表96像素，這意味着無論是真實的屏幕像素密度，它都假定爲96dpi。對於具有更高像素密度的設備，1in將會小於1英寸，同樣mm，cm和pt不是絕對長度。「 https://developer.mozilla.org/en/docs/Web/CSS/length#CSS_units_and_dots-per-inch – 2016-05-15 10:17:37

使用rem。

它是根元素的字體大小和其他UI元素的大小的非常好的基本單位。

如果使用相同的絕對尺寸（以釐米計），則文本和其他元素在移動設備上太大或在桌面上太小。

如果使用相同數量的像素，文本和其他元素在移動設備上太小，或者在桌面上太大。

rem單元現場，因爲它說「嘿，這是正常的文本應該是多大。」基於這個其他UI元素的大小是一個非常合理的選擇。

來源

2015-10-09 01:50:59

爲什麼不使用點，它是跨設備的一致的大小。並且與屏幕大小有關。由於它來自傳統出版，大多數人並不熟悉它。

來源

2015-10-24 17:38:37

從CSS3開始，就沒有真正獨立於設備的CSS單元。請參閱W3C spec on absolute lengths。特別是，絕對單位可能不符合他們的物理測量。

如果物理單位對他們的目的是真的，你可以使用類似點的東西;點足夠接近DPS：

1 in = 72 pt 
1 in = 160 dp 

1 dp = 72/160 pt

如果使用SCSS，您可以編寫一個函數在點返回：

@function dp($_dp) { 
    @return (72/160) * $_dp + pt; 
}

並使用它：

.shadow-2 { 
    height: dp(2); 
}

來源

2016-12-13 17:09:19

什麼是與CSS的dp（密度獨立像素）單位？

回答

相關問題