了解视“网膜屏准时代”的网页和移动端Apps的设计&HTML制作

老梦の / 2015年10月26日

前端开发 2159 4 3

苹果公司率先在许多设备上使用了视网膜屏标准。2012年发布的MacBook Pro上就已经开始使用了视网膜屏显示器，iOS设备使用了该显示器的更是不胜枚举。这意味者消费市场会不断增长，而设计人员必须跟上这一变化。

在本指南中，我们分享的是有关视网膜（Retina）显示屏的用途及想法。构建于原生Android或iOS的APPS对于这个特性的应用会简单些，而在网页上就会复杂很多。如果你对视网膜屏相关的设计不是很熟的话，要掌握这些需要做一些练习。当你的作品能适配各种显示器，并有完美而精细的展示效果时，所有的付出都会是值得的。

关于视网膜屏的基础

你考虑屏幕像素密度的时候，一般用相应的物理单位PPI（Pixels Per Inch所表示的是每英寸所拥有的像素（Pixel）数目。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。）这是测量共同单元，它改变着每个设备。常规的屏幕中有一定的像素在一块1×1英寸的屏幕中。

而在视网膜屏中，像素的数量将要求增加1倍。苹果就是配备了一个这个具有双倍像素显示能力的物理屏。这个技术被认为是已经到达人眼识别极限的。

可以缩放的页面元素，如：文本、CSS容器和SVG图像，它们可以自动适应双倍分辨率。位图和固定宽度的元素则会自动拉升。设计适用于视网膜屏的网站是为了让你的页面内容更灵活的显示。图片应该是SVG格式的，你也可以为这个显示器设计双倍像素的图片。

用字体代替图标

一些熟悉CSS3的设计师会知道自定义字体。您的字体包可用是本地连接也可以是远程连接，这样在CSS中形成一个新的家庭。而且里面除了可包含数字和字母外，还可以包含图标字体。

这样做比做图标矢量化和创建双倍像素图标要好得多。图标字体会根据屏幕大小，自然扩大。用百分比或EMS为单位将提高其的适配性。你可以用HTML代码写图标，这样服务区就无须请求HTTP文件。

这虽然会让图片看起来非常完美，但是也会产生很多代码。大多数图标会像字体一样显示，单色和一些文字效果。如果这些能提高您网站设计的效率，我强烈推荐使用它。否则你在图片和字体之间做判断也会很麻烦。

如果你正在找一个漂亮的字体合集，可以开始浏览We Love Icon Fonts。很多设计师在Github共享他们的文件，而这些内容也不会100%被Google搜录。你可以利用此工具定位字体图标，也可以上传自己的。

可缩放的矢量图形

矢量图形一般用于logo和图标设计，并需要为不同的分辨率制作不同的尺寸，但是这些图形在很多浏览器里都不支持，直到现在一些关于SVG的浏览器标准发布后，才开始有了很好的支持。

图形本身的属性特征包括颜色、曲线、线段、阴影和其他典型的数据。老的浏览器可能不支持这些图形，网页无法渲染，但是你可以做一个类似 SVGeezy 的图形处理。

要来设计一套完整的图标，你需要一定的学习和拥有相关的工具。如果你还不是一个成熟的设计师，去寻找免费资源是一个好的做法，我推荐一个地址给开发者们：primer to hacking SVGs

CSS3视网膜屏背景图片

两种常见的视网膜屏图形切换方式：1、使用CSS3 media queries。2、使用JavaScript库的功能。但CSS3有些旧浏览器依然不支持，而JavaScript也可能会被人禁用。这两种方式都能选，主要看你的目的，以及你如何创建你的网站。

利用CSS3 media queries实现网站图片切换，需要在视网膜屏和非视网膜屏的网站上检查，我们设置视网膜屏的背景图片可以通过一种方法。看看这段来自于this Sitepoint article的代码是如何做的。

#myimage {
  width: 400px;
  height: 300px;
  background: url('lo-res.jpg') 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
  #myimage {
    background-image: url('hi-res.jpg');
  }
}

检查多种尺寸的设备屏幕，最小的像素比往往会反馈一些同样的值，现代哪些支持CSS3的浏览器会迅速作出反应，它几乎是瞬间呈现给访问者的。今天media queries是建立在新的CSS3规范上的。虽然这些东西很流行，但是趋势并不是那么好，做为设计师要在实践中去学习这些。