Retina显示的主CSS像素

  • 所需知识:基本HTML5CSS
  • 要求:文本编辑器,图像处理器,高清智能手机或平板
  • 项目时间:1小时

以上是整个Windows 98桌面的截图,大约在1999年,在运行OS X Lion的现代24英寸iMac上;它看起来像一张邮票。屏幕分辨率的变化会影响网页设计的变化。设计师现在可以部署一系列在90年代闻所未闻的技术。我们使用精心设计的TFT兼容字体和垂直节奏进行排版,并根据十二进制指标制作网格布局以实现清洁组织。我们的24位色轮调色板和日益复杂的渐变技术使得平衡背景和令人惊叹的标志更加出色。

随着屏幕尺寸在许多地方缩小,分辨率也在增加。超高像素密度显示器,智能手机和平板电脑提供了一种培养新技术的新环境。但是基于像素密度技术的原理比许多当代Web开发人员可能意识到的要早。

回到16年前 - 一群伟大的设计师坐下来制定一项革命性的计划。 CSS是1996年的一项新技术,而不是今天的网页样式的可靠和可信标准。 CSS作者的计划是将样式指令与对设备的依赖分开。例如,除了支持CSS在屏幕上设置网页样式之外,他们还希望能够为打印的网页设置样式。对于那个大胆的结局,他们将以下子句插入到像素的定义中:

“如果输出设备的像素密度与典型计算机显示器的像素密度非常不同,则UA应重新调整像素值。建议的参考像素是设备上一个像素的视角,像素密度为90dpi,距离读取器的臂长度。对于标称臂长28英寸,视角约为0.0227度。“

这意味着CSS中的'px'从未意味着设备像素。它也不是长度单位。 CSS px定义为角度测量。

这让一些开发人员感到惊讶,他们自然地认为CSS像素只是一个设备像素。在实践中,这可能是真的,但细节更复杂。

On the left is an idealised representation of a 5×5 image displayed at 1dppx; the right-hand grid is the image upscaled as it would display on a 2dppx device

左边是以1dppx显示的5×5图像的理想化表示;右侧网格是在2dppx设备上显示的图像放大图像

01.细节

CSS的最初计划是支持打印机和显示器,但很快就会发现监视器的功能也会发生变化。如果CSS像素仅仅是设备像素,随着屏幕分辨率的增加,一切都将随着时间的推移而变得越来越小。角度测量设计不仅适合打印,而且具有分辨率独立性的理念。这就解释了为什么后续版本的CSS,包括供应商开发的当代CSS3,将px定义为角度测量。 (唯一的变化是将参考像素密度从90dpi增加到96dpi,使CSS参考像素略微增加角度,0.0213度。)

由于px是非线性角度,因此可以在CSS px中测量角度测量值小于180度的任何值。 Jeremy Clarkson身高6英尺5英寸。从100码的安全距离看,他的身高似乎是57.5px。当满月时,地球的月亮宽度为24.3像素 - 大约是克拉克森的一半。因为单位是非线性的,所以事情并不总是像你期望的那样扩展。例如,1000px是21.075度,但2000px是40.813度,略小于两倍。

使用魔法图5376和一些简单的三角函数执行转换。神奇的数字来自以下值:

  • 参考像素密度为96ppi。出于屏幕分辨的目的,每英寸点数通常也称为ppi,每英寸像素数。
  • 用户和显示器之间的距离,28in。这个距离曾经被称为佛兰芒(Flemish),是一个古老的史蒂尔神秘主义者。一个人是一个人可以到达的距离。
  • 无量纲数量,或无单位数量2.我们将其投入进行测量:所涉及的三角函数使用双倍角度,我们必须在加倍角度之前将像素距离减半。

由于使用的单位是旧的英制英寸,它们在公式中抵消,其角度以弧度而不是度数来度量:

Angle = Arctan(px / 5376)×2
Px = 5376×tan(角度/ 2)

02.包装在像素中

CSS 2.1使96ppi成为新的参考分辨率。但是,显示器不会保持在96ppi。本文开头的iMac屏幕截图是在一个使用大约109ppi的显示器上拍摄的。如果在该设备上粘附参考像素,则需要1.1354(109ppi / 96ppi)设备像素,以便在96ppi设备上以与1px相同的表观角度尺寸显示参考像素。由于这在物理上是不可能的,因为像素是显示器的最小不可分割单元,所以它必须是抗锯齿的。对于大多数应用程序,这将导致渲染模糊和不吸引人。

正因为如此,CSS 2.1--它在2011年6月才成为W3C的推荐,但事先在草案中使用了多年 - 引入了一些文字,清楚地表明参考像素仅用作锚定的基础。实际价值。它建议px单元参考“最接近参考像素的设备像素的整数”。换句话说,当在距离用户28in的距离处使用的设备超过144ppi(96ppi×1.5)时,则应该缩放CSS px以表示两个设备像素。当它超过240ppi(96ppi×2.5)时,它应该缩放CSS px以表示三个器件像素;等等,等等。

The derivation of the px to radians angular conversion formulæ from the geometry of the CSS reference pixel

从CSS参考像素的几何形状推导px到弧度角度转换

实际上,这无论如何都没有实际意义,因为没有足够分辨率的显示器使得缺少像素缩放成为供应商的问题。这意味着,至少在矢量图形之外,参考像素被视为与设备像素同构。

作为设备像素的CSS px的常见(错误)概念在2010年6月受到挑战,当时iPhone 4以326ppi屏幕发布。 Apple的营销活动将其称为“解决方案”。很明显,iPhone很少用于远离用户的CSS标准28,并且更接近使用意味着像素看起来更大并且感知像素密度下降。 CSS 2.1建议在28in时达到144ppi的高级阈值。对于iPhone 4的326ppi,同样明显的感知像素密度达到了12.368英寸(28英寸×144像素/ 326点/秒)的距离甚至更远 - 非常接近实际使用距离。所以达到了高档门槛。

此外,尽管苹果公司声称其iPhone 4屏幕的亮度达到326ppi,但其能够达到最高可视水平的像素密度,制造商仍在不断提高其密度。例如,HTC Rezound(2011年11月)拥有342ppi的显示屏,甚至RIM也开发了一款拥有356ppi屏幕的Blackberry。在功耗非常高的移动设备上,令人惊讶的是RIM没有降低额外的30ppi以延长电池寿命。以前是相机制造商开展了一场分辨率大战:也许移动制造商现在正在寻求解决方案,成为一种新的可销售外形。

无论是什么原因,像素密度和分辨率都会继续增加。随着CSS 2.1高级阈值的达到,必须进行升级。供应商如何做到这一点。例如,苹果公司决定以第二代iPad的速度在网络上升级图像。使用四个(2×2)物理设备像素在该设备上显示单个像素图像(1×1)。其他人,例如那些使用Android,使用不同比率的高档,通常约为1.5倍或1.6倍。用户还可以通过放大到自定义级别来缩放某些设备上的页面。在任何这些设备上,由于这些因素,图片可能会显得模糊。

03.设计风格

一种解决方案是使用CSS。在这里,我们希望将CSS px的原始设计中固有的想法作为独立于分辨率的单元返回。但由于CSS px的角度测量特性现在受到高档锚点的调节,因此处理分辨率的能力必须在其他地方进行。处理它的最合理的地方是作为新的媒体查询。媒体查询是一种条件,只有在呈现用户代理满足条件时才允许使用某些样式表规则。

由于浏览器供应商现在有一种坚定的习惯,即在完全不同的方向上相互创新,所以礼貌地说,至少有四种不同的@媒体解决方案。开发人员可能需要使用更多而不仅仅是为了安全。一个由WebKit使用,另一个由Mozilla使用,第三个由Opera使用。目前还没有针对IE10的已发布解决方案。另一个解决方案是CSS3规范中给出的解决方案,它接近于W3C推荐。尽管由Mozilla员工编辑,但CSS3规范使用了与Mozilla不同的方案!

@media(-webkit-min-device-pixel-ratio:1.5){/ * WebKit * /}
@media(min - moz-device-pixel-ratio:1.5){/ * Mozilla * /}
@media(-o-min-device-pixel-ratio:3/2){/ * Opera * /}
@media(min-resolution:1.5dppx){/ * CSS3 * /}

Mozilla变种不是-moz敏设备象素比正如所料。为了获得最大的跨浏览器兼容性,您必须使用以下内容:

标头{
background:url(image@1x.png);
}
@media only screen and(-webkit-min-device-pixel-ratio:2),
只有屏幕和(-moz-min-device-pixel-ratio:2),
只有屏幕和(-o-min-device-pixel-ratio:2/1),
只有屏幕和(min-device-pixel-ratio:2),
只有屏幕和(最小分辨率:2dppx){
标头{
background:url(image@2x.png);
背景大小:50%;
}
}

此示例将标题元素的背景图像设置为在1dppx和2dppx屏幕上使用一个设备像素,但仍会在使用这些值之间的像素密度的设备上导致可能模糊的基于重采样的放大。我们必须使用最小设备的像素比在CSS3的情况下,而不是现在,或者与现在一样最小分辨率。当浏览器有更多的像素可用时,通常每像素区域有四个点进行渲染,那么它每个像素区域只使用一个点,或者重新采样图像。此解决方案仅针对支持这些功能的现代浏览器,但我们期望在现代高密度像素设备上找到现代浏览器。

The device pixels on the new ultra-high density displays are impressive, though not as tightly packed as one may think. Microscope images taken by Lukas Mathis, author of Designed for Use.

新型超高密度显示器上的设备像素令人印象深刻,但并不像人们想象的那样紧凑。 Lukas Mathis拍摄的显微镜图像,“Designed for Use”的作者。

通过将图像的大小设置为50%来完成重新缩放。对于标准图像,您还可以适当地设置高度和宽度属性以缩放内容。 HTML5规范警告这种技术,称“尺寸属性不是用于拉伸图像”,但这种做法很常见。在CSS3中,您仍然可以使用另一种技术。

04.设定决议

与...结合@媒体技术,CSS3引入了一个名为的新属性图像分辨率,这可以改变特定图像的分辨率。它可以被认为是一种图像的自定义缩放。不幸的是,对于现在必须在1-2dppx之间和之间定位设备的开发人员而言图像分辨率属性不仅仅是自适应的:它与设备像素升级没有任何关系。这意味着仍然必须在媒体查询中使用此技术。以来图像分辨率适用于背景图像和主要内容,这是如何使用新属性编写具体来自上面的媒体查询示例的标题规则部分:

标头{
background:url(image@2x.png);
图像分辨率:2dppx;
}

我们也可以使用192dpi而不是2dppx:由于CSS的96dpi参考像素密度规定,它们处于固定比率。但是,由于这种语法的主要优点之一是要明确开发人员的目标,在这种情况下使用2dppx是更合理的最佳实践。

以来图像分辨率只是CSS3的一个预计功能,它不太可能在短期内拥有广泛的浏览器支持,供应商可能会选择实现无数的替代语法,就像他们使用最小分辨率属性。

使用CSS并不是适应新像素密度的唯一方法。有无数的客户端和服务器端解决方案,垫片和polyfill实现相同的目标。有些人使用JavaScript并进行检查Window.devicePixelRatio执行他们的魔法。但是CSS在1996年在某种程度上预见到了这个问题。基于最近的显示技术所带来的挑战,规范和基于实现的创新已经升温,但CSS仍然是一个可行的,如果不是最优雅的解决方案独立性解决方案。

本文首次出现在.net杂志的第230期。

肖恩B.帕尔默Inamidst.com是一位早期的现代历史学家,拥有计算机科学背景。他是W3C的EARL 1.0和XML可访问性指南规范的编辑,并为HTML,JavaScript和语义Web的书籍做出了贡献。

喜欢这个?阅读这些!



翻译字数超限