什么是 CSS 的 dp(密度独立像素)单位? [英] What's dp (density independent pixels) units with CSS?
问题描述
对于 Android，人们建议对 UI 元素使用 dp(密度独立像素)度量，并且存在一些约定，例如使用 48dp 来表示按钮高度等.
For Android, people recommend using dp (density independent pixels) measurements for UI elements, and there are conventions that exist such as using 48dp for a button height, etc.
我正在开发一个网络应用程序，我收到了很多关于 UI 设计的批评，说它不符合 Android 设计标准.显然，我的应用程序看起来会有所不同，因为它使用 CSS 和 HTML 而不是 Android Holo 主题，但我仍然希望它尽可能地符合.但是 CSS 不允许密度独立测量.
I'm working on a web application, and I'm getting a lot of criticism on the UI design saying it does not conform with Android design standards. Obviously, my application is going to look different since it is using CSS and HTML instead of the Android Holo theme, but I would still like to make it conform as much as possible. However CSS does not allow density independent measurements.
当我在不同的分辨率和像素密度下测试我的应用程序时，它看起来不太好，有时，它的比例不合理，所以它甚至无法正常工作.CSS 没有像 Android 原生开发那样的 dp 单位，但我想知道有哪些替代方案.
When I test my application on different resolutions and pixel densities, it does not look good, and sometimes, it is way out of proportion so it's not even functional. CSS doesn't have dp units like Android native development does, but I was wondering what some alternatives are.
我可以使用 Javascript 以某种方式获取像素密度并适当地手动缩放所有内容吗?制作在所有分辨率/密度下都能很好地显示和运行的网络应用的最佳方法是什么?
Can I somehow get the pixel density using Javascript and manually scale everything appropriately? What is the best way for making a web app that looks and works nicely on all resolutions/densities?
推荐答案
http://www.w3.org/TR/css3-values/#lengths
CSS 中最接近的单位是视口百分比单位.
The closest unit available in CSS are the viewport-percentage units.
- vw - 等于初始包含块宽度的 1%.
- vh - 等于初始包含块高度的 1%.
- vmin - 等于 vw 或 vh 中的较小者.
- vmax - 等于 vw 或 vh 中的较大者.
唯一需要注意的不支持这些单元的移动浏览器是 Opera.http://caniuse.com/#feat=viewport-units
The only mobile browser to be aware of that doesn't support these units is Opera. http://caniuse.com/#feat=viewport-units
这篇关于什么是 CSS 的 dp(密度独立像素)单位?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
