什么是CSS的dp(密度无关像素)单位？

Question

对于Android,人们建议对UI元素使用dp(密度独立像素)测量,并且存在诸如使用48dp作为按钮高度等的约定.

我正在开发一个Web应用程序,我对UI设计提出了很多批评,称它不符合Android设计标准.显然,我的应用程序看起来会有所不同,因为它使用的是CSS和HTML而不是Android Holo主题,但我仍然希望尽可能地使它符合要求.然而,CSS不允许密度独立测量.

当我在不同的分辨率和像素密度上测试我的应用程序时,它看起来不太好,有时,它是不成比例的,所以它甚至不起作用.CSS没有像Android原生开发那样的dp单元,但我想知道一些替代方案是什么.

我能以某种方式使用Javascript获取像素密度并手动适当地缩放所有内容吗？制作适合所有分辨率/密度的Web应用程序的最佳方法是什么？

Answer 1

我不同意目前接受的答案.正如uber5001所暗示的那样,a px是一个固定的单元,并且与Android 专用的努力类似dp.

编写CSS时,请在说明dp或sp的地方使用px.Dp只需要用于Android的开发.

另外

在设计Web时,请将pp替换为px(用于像素).

这是答案.+1用于引用材质规格. (20认同)
来自MDN:"单位输入并不代表屏幕上的物理英寸,但代表96px.这意味着无论真正的屏幕像素密度是多少,它都被认为是96dpi.在具有更高像素密度的设备上,1in将是小于1物理英寸.同样,mm,cm和pt不是绝对长度." https://developer.mozilla.org/en/docs/Web/CSS/length#CSS_units_and_dots-per-inch (2认同)
材料设计的最新更新（2018 年 5 月）更深入地解释了像素密度 https://material.io/design/layout/#pixel-density (2认同)

Answer 2

CSS中最接近的单位是视口百分比单位.

唯一不支持这些单元的移动浏览器是Opera. http://caniuse.com/#feat=viewport-units

这个答案是不正确的，因为 css 中的 `px` 单位（与直觉相反）实际上已经与像素密度无关——“一个 css 像素不是一个像素”，有很多关于这个的文章 (6认同)

Answer 3

在CSS3中,可能更准确地说网络没有Android px.CSS3的规范px说:

像素; 1px等于1英寸的1/96

px 可能是你想要的测量,将来.

Answer 4

使用rem.

它是根元素的字体大小,是其他UI元素大小的非常好的基本单位.

如果使用相同的绝对大小(厘米),文本和其他元素在移动设备上会太大或在桌面上太小.

如果使用相同数量的像素,则文本和其他元素在移动设备上会太小或在桌面上太大.

该rem单位是现场,因为它说"嘿,这是正常文本应该是多大." 在此基础上设置其他UI元素的大小是一个非常合理的选择.

Answer 5

从CSS3开始,没有真正与设备无关的CSS单元.有关绝对长度的信息,请参阅W3C规范.特别是,绝对单位可能与其物理测量值不匹配.

如果物理单位符合他们的目的,你可以使用点数; 积分足够接近dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

如果您使用SCSS,您可以编写一个函数以pts返回:

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

并使用它:

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

Answer 6

基于rem单位的界面怎么样？

我没有足够的经验确认,但我认为你可以根据视口大小进行一些数学运算,在根元素中应用字体大小,整个界面会相应调整.这件事对我来说有点巫术.