杭州网站建设哪里好:如何为您的网站创建高密度Retina显示器

2019.01.10

615

杭州网站建设哪里好

制作Retina显示驱动网站的关键是正在使用的图像质量。图像至少要大两倍,这样才能在Retina设备上看到更清晰的图像。

例如,如果要显示宽度为400 px的图像,则图像的原始宽度必须为800 px。否则,如果您试图在Photoshop中扩展这一点,图像将看起来很模糊。

为了让你对这个Retina显示器的工作原理有一个清晰的洞察力,让我们来看看关于如何Retina-fy网站的以下选项。

完成本教程所需的资源:

  • 高分辨率图像(在本教程中,我们只使用一张图像,但您可以自由使用您的图像)
  • OPERA移动仿真器
  • Retina.js
  • 时间和耐心

优化基本视网膜显示器

[地名] 阶地(英语) 1:

在您喜欢的位置上创建一个新文件夹,并将其命名为视网膜。然后,在视网膜文件夹中,创建另一个文件夹并为我们的图像命名它为IMG。

接下来,我们需要找到一个高质量的图像,用于本教程。所以让我们下载一张乡村小径景观杭州网站建设哪里好:如何为您的网站创建高密度Retina显示器。该图像的维数为1555 pxx1037px,具有较高的密度像素,是我们演示的一个很好的例子。

[地名] 阶地(英语) 2:

在Photoshop中打开农村_TRAIL_园林.jpg文件,并将其保存为[Email受保护的]在IMG文件夹下。

接下来,将图像大小调整为50%。为此,转到Image-&>Image大小,然后将宽度更改为50%。这将图像文件的大小调整为一半。将其保存在IMG文件夹下,文件名为视网膜_Image.jpg。

[地名] 阶地(英语) 3:

现在让我们继续把这些杭州网站建设哪里好:如何为您的网站创建高密度Retina显示器显示到我们的网页上。创建一个新的HTML文件并将其命名为retinaDisplay.html。在Body标记中,将此代码放在下面。



您还可以使用内部和外部CSS在您的网站上显示Retina图像。例如,检查下面的代码。




现在你可以在你的视网膜设备上检查这个,你会清楚地看到第一个图像比第二个图像更清晰。没有视网膜装置?没问题!

Testing Retina Display through OPERA移动仿真器

下载OperaMobile模拟器并将其安装在计算机上,然后启动它。

install

由于iPad到2048 px的分辨率为1536 px,所以让我们在Opera Mobile模拟器上添加这个分辨率。为此,单击ResurationLabel下的AddButton,并将其命名为iPadRetina,到2048 px的维度为1536 px,然后单击OK。

大型-SVG-图标-第2部分

然后,单击“启动”并将HTML文件的URL放入。到那时,您可以在屏幕上看到这两个图像。请注意,您也可以放大,以清楚地比较图像。

size screen

emulator

您已经看到高质量的像素可以改善访问者在Retina设备上的体验。Retina设备将看到额外的像素数据。它将使用这些数据来填充屏幕包含的额外PPI(每英寸像素)。

有很多方法来修正你的网页。看看下面的例子,它们可以帮助你改进你的Retina网站。

使用SVGS和CSS 3效应

retinas视网膜

如果您有一个徽标和一些想要在Retina设备上显示的向量,强烈建议使用SVG文件。SVG(ScalableV杭州网站建设哪里好ectorGraphics)使用基于形状和线条的可伸缩二维图像。

这意味着图像将在Retina设备上显示得很清晰。基本上,SVG文件是在AdobeIlluStrator上创建的。

另一方面,你也可以使用CSS 3效果,让你的网站。CSS 3效果添加看起来像你在Photoshop中看到和使用的效果,比如阴影和笔画。

使用CSS 3创建按钮和框将使您能够显示锐利的元素,无论屏幕在哪里被查看。

使用Web字体

iPad Retina

网络字体是伟大的,因为它们为我们的现代网站提供字体可访问性和创造性。这些字体可以在网上找到。可以使用Web字体的主机站点提供的链接标记将它们嵌入到HTML标记中。为CSS 3添加@字体规则对设计师来说是一个令人眼花缭乱的想法。

@font-face
{
font-family: Sansation Light;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

网页字体,如谷歌字体,也使设计工作流程更容易,因为您不需要导入您的可用字体到您的网站。你只需要复制和粘贴一段链接代码,你就很棒了。


body { font-family: 'Arbutus'; }

关于网页字体的好处是,它们在现代响应性网页设计上负责任地工作。他们给网页设计师更多的自由在他们的设计,而不考虑他们的字体将如何在响应的网页。

Web字体资源

您可以为您的网站字体使用以下服务。

  • 谷歌字体
  • Fonts.com
  • typelist类型表

利用雪碧图像

谷歌字体

在构建大型站点时,尽量减少用户需要下载的图像数量是很重要的。图像精灵可以帮助你完成这一任务,只需将一组图像放入单个图像中,然后通过更改背景位置将其显示在网页上。

您可以轻松地在Photoshop中创建一个精灵图像。要了解如何为Web使用创建图像精灵,请单击此处。

优化Retina显示器的其他方法

除了Retina网页的基本方式外,还有其他方法可以优化用户在Retina设备上的体验。

CSS媒体查询

让Retina设备时不时地下载高质量的图像并不是理想的方法。这将使网页加载更慢。幸运的是,媒体查询可以为您解决这个问题。

媒体查询图像替换技术将使用户更容易访问Retina图像。让我们将此应用于前面的示例。

[地名] 阶地(英语) 1:

创建一个新的杭州网站建设哪里好HTML文件并将其命名为mediaRetina.html。在Body标记中,放置以下代码。

[地名] 阶地(英语) 2:

然后在我们的内部/外部CSS中,为我们的非Ret杭州网站建设哪里好ina映像放置这个代码。

.imgRetina { background: (‘..//uploads/image/20190110/pic_779_2.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }

[地名] 阶地(英语) 3:

接下来,让我们为Retina映像添加CSS代码。如果用户在Retina显示器上,我们将把普通图像替换为Retina图像。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.imgRetina { background: (‘..//uploads/image/20190110/pic_779_3.jpg)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }
}

我们的媒体查询以<;@media Query语句开头,后面只有<;@media Query语句,这意味着只有屏幕设备必须执行代码。然后,我们增加了最小设备像素比,这意味着屏幕必须等于或大于两者。

我们还添加了-webkit浏览器前缀,以确保我们的代码能够在旧的Safari浏览器上工作。祝贺你!

您刚刚使用了媒体查询替换技术。每当用户在Retina显示设备上查看您的网页时,非Retina图像将被Retina图像替换。

jQueryRetina显示优化

如果用户使用高密度设备,我们也可以使用jQuery替换图像。在本教程中,我们将利用retina.js的功能。Retina.js是一个开源脚本,它可以方便地为带有视网膜显示器的设备提供高分辨率的图像。我们试试看。

[地名] 阶地(英语) 1:

创建一个新的HTML文件并将其命名为jqueryRetina.html。在头部分,放置来自Google的jQuery库源链接。

[地名] 阶地(英语) 2:

接下来,为Retina文件夹创建一个新文件夹,并将其命名为js。现在,让我们下载retina.js,然后将链接代码放在结束标记之前。

[地名] 阶地(英语) 3:

将以下代码放在我们的正文部分。这将包括我们使用imgRetina类的基本视网膜图像标记。



[地名] 阶地(英语) 4:

之后,在我们的内部/外部CSS中,为我们的非Retina映像放置此代码。它包含图像的来源及其宽度和高度。最后,我们使用边距:0 AUTO对图像进行居中。

.imgRetina { background: (‘..//uploads/image/20190110/pic_779_2.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }

就这样!不,杭州网站建设哪里好我不是开玩笑,真的!该脚本假设您使用Apple指定的高分辨率修饰符(@2x)来表示IMG文件夹上的高密度图像变体。

如果您还记得,我们的非Retina图像的名称是Retina_Image.jpg,所以当用户在Retina显示设备上浏览时,它会查找我们的Retina图像[电子邮件保护]并替换它。

结束语

视网膜显示器每英寸的像素数比普通显示器高。在将其上传到您的Web服务器之前,如果您首先检查它是否包含高密度像素,则会有很大帮助。如果您不确定,您可以使用其他方法替代您的图像。

在本教程中,我向您介绍了如何改进Retina显示体验站点的其他资源。我还向您介绍了如何正确地优化Retina显示设备的Web图像的步骤。您可以使用所有这些方法来改进您的站点,避免站点访问者抱怨Retina显示设备上的图像质量。

最新案例