我们的绝对CSS单位在哪里?

响应式设计很难。

使用一个接口来承载多种不同的设备是一项艰巨的任务。 CSS3宽度媒体查询使我们能够根据不同的屏幕尺寸调整我们的界面。设备上还有许多其他变量会影响我们界面的可用性。

对于不熟悉像素密度的细节的人来说,你已经原谅了。想象一下90年代800x600 CRT显示器上的所有像素,但是塞进了一个4英寸的口袋设备。如果屏幕小于臂长,那么密度很大。马特布拉加写了一篇很棒的总结就在用iPhone 4推出视网膜显示器之前。

像素密度,问题

触摸界面可以是美丽的东西。删除键盘和鼠标的代理使用户更接近他们的内容,允许他们直接执行操作就像他们在现实生活中一样。

为了使触摸界面愉快,必须首先使用它们。一个基本要求是所有触摸目标都要足够大,以便用食指或拇指轻松敲击。大多数基于触摸的用户界面指南建议最小触摸目标大小在8mm和1cm之间。当像素密度变化时,我们如何确保触摸目标保持在这个最小尺寸?

有关详细信息,请参阅Luke Wroblewski从2010年开始的精彩研究

A fingure touching a screen

手指不能伸缩。为什么我们的UI元素?

原生应用如何解决多个像素密度?

Android开发人员可以使用Google操作系统独有的设备。该密度独立像素处理设备碎片,因此开发人员不必担心它。

与密度无关的像素相当于160 Dpi屏幕上的一个物理像素,这是系统为“中等”密度屏幕假定的基线密度。在运行时,系统根据所使用屏幕的实际密度,根据需要透明地处理dp单元的任何缩放。-Android开发者文档

iOS开发人员 - 在iPhone 4发布之前不必担心多个像素密度 - 建议使用点而不是像素来允许视网膜显示器将测量值缩放两倍。

网页设计180 - 是我们的银弹吗?

还记得pt单位吗?还记得它一次又一次被滥用吗?积分是打印测量!他们没有网页设计的地方!我记得有无数次读过这个行业试图教育本身就是这样做得很好。我自己多次分享这种观点,字体大小分数不一致。在我们的现代背景下,让我们将'不一致'重新塑造为'响应'。密度独立单元正是我们所需要的。我们可以使用pt,in,cm,mm和pc单位来保持我们的目标在任何地方都很友好......对吗?

对?

错误

或者:浏览器如何学习违反规范并误导开发人员

幽默我一秒钟,抓住一个统治者和打开这个测试页面。

尝试在手机,平板电脑或台式电脑上测量此页面。困惑?我也是。看看Github上的造型,这很简单。我还发布了一些关于单位如何在几台设备上渲染的照片画廊。我会在您的设备上发布您发送的测试页面的任何照片。通过评论或Twitter发送给我。

今天处理它

Scott Kellum在文章中提到了类似的理由“像素身份危机他演示了一些设备如何上下缩放像素以尝试在基于像素的网站上实现一致性。

他还提供了一种解决方案,通过使用非标准的“-webkit-device-pixel-ratio”媒体查询来检测和适应这些设备。你可以查看一个Github上的代码示例

很高兴我们现在有解决方案来解决这个问题。与简单地以绝对单位设置大小并且它非常友好相比,这是一个混乱和复杂的耻辱。您将不得不继续回来并添加更多媒体查询以应对具有新像素比率的新设备。

明天处理它

当我们发现它不符合我们的喜好时,很容易对我们的情况抱怨。真的很容易所以让我们做更多的事情吧。我们拥有获得我们需要的平台和激励。

给我们工具,我们将完成工作。温斯顿丘吉尔爵士

浏览器不应该告诉我们该做什么,我们告诉他们该做什么。浏览器只有在开发人员充分利用浏览器时才有用。 Internet Explorer最近展示了Web开发人员的强大功能的完美示例。微软最近宣布Internet Explorer将自动更新到最新版本。我毫不怀疑这是因为网络开发人员积极放弃对旧版本的支持,并让那些少数用户体验到了糟糕的体验。

如何有所作为

你可以检查辉煌向前移动Web有关提交错误的更多提示和资源。



翻译字数超限