CSS / HTML – dp(密度独立)单位?

对于Android,人们build议对UI元素使用dp(密度无关)度量,并且存在一些约定,例如使用48dp作为button高度等。

我正在研究一个CSS / HTML / Javascript应用程序,并且在UIdevise方面受到很多批评,认为它不符合Androiddevise标准。 很明显,我的应用程序看起来会不一样,因为它使用的是CSS / HTML / Javascript而不是Android Holo主题,但我仍然希望尽可能地使其符合。 但是CSS不允许密度独立测量。 当我在不同的分辨率和像素密度下testing我的应用程序时,它看起来不太好,有时候它的方式是不成比例的,所以它甚至不起作用。 CSS没有像Android本地开发那样的dp单元,但是我想知道一些替代方法是什么。 我能以某种方式使用JavaScript获取像素密度并手动缩放所有内容吗? 制作CSS / HTML / Javascript应用程序的最佳方法是什么?它能够很好地处理所有的分辨率/密度?

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

我不同意目前接受的答案。 按照uber5001的build议,一个px是一个固定单位,并且与Android-specificc dp的努力类似。

每种材料的规格 :

在编写CSS的时候,无论使用dp还是sp,都要使用px。 Dp只需要用于Android开发。

在CSS3中,说networking没有Android的px可能更准确。 CSS3的px规范说:

 pixels; 1px is equal to 1/96th of 1in 

px可能是你想要的,在未来的测量。

使用rem

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

如果使用相同的绝对大小(以厘米计),则文本和其他元素在手机上会太大,或者在桌面上太小。

如果使用相同数量的像素,文本和其他元素在手机上太小,或者在桌面上太大。

rem单元是现场的,因为它说“嘿,这是正常的文本应该是多大”。 基于这个其他UI元素的大小是一个相当合理的select。

基于rem单元的界面呢?

我没有足够的经验来确认,但是我认为你可以根据视口尺寸做一些math运算来在根元素中应用字体大小,并且整个界面也会相应地进行调整。 这东西对我来说还是有点巫术的。

从CSS3开始,没有真正独立于设备的CSS单元。 见http://www.w3.org/TR/css3-values/#absolute-lengths 。 特别是,绝对单位可能不符合他们的物理测量。

如果物理单位对他们的目的是真的,你可以使用类似的东西; 点数足够接近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); } 

为什么不使用点,这是跨设备的一致的大小。 并且是相对于屏幕大小。 大多数人都不熟悉它,因为它来自传统的出版。