CSS的dp(与密度无关的像素)单位是什么? [英] What's dp (density independent pixels) units with CSS?

查看:349
本文介绍了CSS的dp(与密度无关的像素)单位是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对于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.

我正在开发一个Web应用程序,但我对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获得像素密度并适当地手动缩放所有内容吗?制作在所有分辨率/密度下都能正常工作的Web应用的最佳方法是什么?

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆