跳到主要内容

停止思考像素:改进网页布局

我刚刚将我的个人网站从基于像素的布局测量转换为百分比和ems。在过去一年左右的时间里,我一直在倡导其他人这样做。我已经阅读了这些文章,听取了论点并玩弄了这些技巧。而且我坚定地认为,我们应该在我参与的每一场辩论中以这种方式工作。一直希望没有人在我的个人网站上打开网络检查员,检查我的脏秘密。我公开提倡坚实的最佳实践,同时私下享受基于像素的布局的简易性和速度。为了大声哭泣,我可以用这种双重性来竞选公职。

首先,为什么?

如果你不熟悉这个争论,或者你根本没有看过它,那么这就是它的要点:使用像素作为测量单位会让需要它的用户变焦,因为它以单位形式声明了你的字体大小锁定到屏幕的物理属性。此外,理论上纯粹使用ems进行测量类型,因为它是一种印刷测量,如果您已经在测量和比例的印刷单位中定义了内容参数,那么在其余部分应用相同的想法是有意义的。你的布局也是如此。问题是,使用像素很舒服。一切看起来都像你想要的那样,至少在桌面设备上的默认缩放级别。所有其他设备或缩放级别都有问题,但至少你的理想情况不是,对吧?

The effect that different percentage values on the body element have on the sizing of ems

不同百分比值对身体元素的影响对ems的大小有影响

我怀疑很多人避免使用ems的真正原因是:他们很可怕,因为数学有点奇怪。与当前字体大小相等的度量单位的想法看起来很奇怪,因为根据该描述,您基本上没有定义任何内容。当你在大多数浏览器中考虑到如果你将主体上的字体大小设置为100%然后1em将等于16px时,事情变得有点焦点。你可以从那里调整你的数学。另一种常用技术是将主体上的字体大小设置为62.5%,这通常相当于10px。然后段落字体大小1.2em将等于12点。这种方法使数学更容易胃,如果它对你有帮助,那么一定要使用它。

转折点

那么,是什么改变了我的思绪足以让我跳过像素的舒适和轻松,并拥抱在非精确,松散定义的测量中思考的几乎没有控制的混乱?这是购买带Retina显示屏的新款MacBook Pro。当我第一次把我的网站加载到那个东西上时,我很敬畏。排版清晰而美丽。它具有很好的硬边缘,笔画宽度变化的细微之处不仅可见而且干净清晰,字距调整和跟踪得到了改善(此时应该很清楚我是一个完全没有希望的类型)。我立即开始考虑我们作为设计师可以在HiDPI显示器上使我们的网站更好的方式。

第一步是显而易见的,我认为我与之合作的大多数设计人员和开发人员,包括我自己,已经做了一段时间了。通过依靠CSS3属性来生成我们的风格效果,我们已经确保它们能够在具有高像素密度的设备上精美呈现。下一步,也是显而易见的,将开始计划为他们正在观看的显示器优化的服务图像。这稍微困难一点,但并非超出任何合理技术开发人员的范围。使用@ 2x命名方案(或@ 1.5x或您确定的任何其他比例合理)准备的图像可以使用Picturefill项目(一种可能的未来HTML的polyfill)之类的东西来应用将接受多个源和属性以应用这些源的元素。

The smallest border that 1 CSS pixel can generate on a Retina display, compared to the crisp 1 device pixel border you can get with images

与使用图像获得的清晰的1个设备像素边界相比,1个CSS像素可以在Retina显示屏上生成的最小边框

这让我想到了另一个想法:如果我想利用所有这些额外的像素来制作更微妙的效果呢?如果我使用图像制作一个按钮,我可以给它一个设备像素边框,因为我完全控制渲染的内容,但我只能在Retina显示屏上给它一个1 CSS像素边框或2个设备像素,如果我做正确的事情并用CSS设置我的按钮样式。随着HiDPI显示器的采用和像素密度的增加,为一切准备图像资产以保持所需的微妙和控制将变得越来越难以维护。鉴于这一事实,我似乎很清楚像素作为测量单位的死亡正在逼近。

那么,我们如何超越像素?

作为一名受过印刷设计教育的人,我不断寻求能够在我的网页设计项目中获得更多细微的细节。从大多数打印分辨率的荒谬细节到屏幕72ppi的笨拙可能是向我过渡到网络最痛苦的部分,而且我认识的一些人从未真正接受过你必须放弃一定程度的控制成为一个成功的网页设计师。

在这种情况下,我的打印背景让我想到了屏幕布局中真正的分辨率独立性的潜力。 Retina显示器的像素密度为326ppi,略高于300ppi的分辨率,许多印刷设计师认为这是高质量图像的门槛。人眼无法在平均观看距离上区分其像素,因此使用像CSS像素这样的人工构造来测量布局似乎不再相关。如果我们再也看不到由像素拟合的矢量元素创建的偶然模糊边缘,则它们实际上不存在。那么,为什么我们不回到现实世界的测量,而不是在设备像素的抽象测量系统中思考呢?幸运的是,我们已经拥有了这个系统的基础:积分和ems。将picas添加到混合中将为我们提供一整套真实世界的测量,用于定义高分辨率的Web布局。

为了实现这一点,浏览器和硬件制造商必须标准化点的显示以与实际英寸对齐而不是基于像素的设备英寸并添加picas。这意味着如果你在屏幕上测量了一个真实的英寸,那么它内部就会有6个皮卡,而每个异食癖就会达到12个点,每英寸总共72个点。为了保持向后兼容,这些值仍然必须调整为在body元素上声明的百分比,但是大部分实现可以很容易地标准化。 Ems将继续按照宣传的方式工作,根据身体上声明的值改变自己。这就是这个想法的美妙之处。它不会破坏单个旧设备上的体验,但它会将其标准化为新设备。

我发誓,我不是疯了

坚持一秒钟。难道我没有把我们带回到我希望我们停止思考的同样糟糕的决心吗?如果我们调整点的实现以包括以非整数量声明它们的能力,则不会。

在像素密度高于300ppi的设备上,使用皮卡和点的实际值实现,如果我声明边框的宽度为0.5pt,那么我应该得到一条很好的细线,没有模糊边缘的抗锯齿会在像素密度较低的设备上创建。地狱,即使我们已经拥有相同的抗锯齿实现它看起来也很干净,因为模糊边缘太小而无法被人眼看到。请记住,如果你看不到它,那么它实际上并不存在。这甚至可以让我们从印刷设计中借用另一个概念,即零宽度线。通过在大多数打印软件中声明一个值为0pt的行,您实际上得到的行是能够由正在使用的打印硬件生成的最小行。您可以在网络上应用相同的概念,并获得一个总是1个设备像素宽的边框,为您提供在您的网站上查看的设备上最微妙的可能性。需要声明一个实际的0来覆盖样式规则吗?只需在没有任何测量单位的情况下声明它,就可以获得与之相同的旧0。

这些想法为我们提供了一定程度的精确度,这在以前的网页设计中是无法实现的,精确度是印刷设计中如此美丽的驱动力。

那么,让我直截了当......

总而言之,我建议一些事情。首先,浏览器制造商帮助我们改变现有的测量单位,点,以更好地与现实世界的价值保持一致,并将picas作为一个整体加入。其次,开发人员使用ems,points和picas的组合进行调整以声明布局和排版规则。第三,HiDPI设备的制造商根据现实标准设计他们的软件进行渲染:标尺上的一英寸等于屏幕上的一英寸。

我不认为我在这里提倡任何过于循环的东西。浏览器制造商必须考虑以保持向后兼容性的方式实现这些变化,但是我将这种练习留给了比我自己更好的思维。

话:史蒂夫希基

Steve Hickey是一名用户界面设计师和前端开发人员新鲜的耕种土壤- 由设计师,编码人员和用户体验专家组成的团队,通过咨询,教育,培训和活动,帮助企业家和企业为网络和移动应用创造出血腥的用户体验。自2005年以来,他们已帮助300多家客户,包括通用电气,微软,麻省理工学院,哈佛,TEDx,时代华纳有线电视,沃尔格林,Hubspot等众多客户。

话题



翻译字数超限