HTML5和CSS3的网站高分辨率显示器

当苹果公司推出了一种新的高分辨率显示–所谓的视网膜显示–的iphone，ipad和macbook，几年前，他们迎来了一个新时代的显示质量。这样的屏幕上，人眼无法分辨单个像素点了。
高分辨率的显示器是常态而不是例外，今天，你会发现越来越多的中距离高分辨率的移动设备。许多应用程序已经高清晰度兼容，现在你还可以创建高分辨率的网站使用html5，css3和javascript–，无需额外的javascript库。
双锐利由于双像素密度
移动设备上使用320像素的默认宽度，如此多的手机网站的设计宽度。高分辨率的显示器，但是，有双像素或更。为了防止网站出现一半大小的显示器上的双密度，这将扩大规模。这部作品的字体和矢量图形就好了。基于位图的格式如jpeg和png文件，然而，模糊和失真成为。
因为这种显示器越来越普及，提供高质量的web项目是web设计人员和开发人员的一个重要因素。
html5，srcset属性
人们已经挣扎了很长一段时间在html5提供高分辨率的显示图像。的srcset属性已成为选的方法。它允许你定义不同的像素密度多文件来源。像素密度分别定义以下参考图像的一个空间，例如，”2“双像素密度。
与lt；img的srcset=“image.jpg，image@2x.jpg 2x”src=“jpg图像。”宽度=“320”高度=“160”alt=“” / >；
在上面的例子中，两个文件被定义通过srcset。第一个是用于标准的像素密度的设备。对于标准的像素密度可以把价值”1x“。这是一个双像素密度的显示文件。的src属性应作为一个年长的浏览器后退。同时，参考“正常”的形象在这里。
在高分辨率显示两个图像对比：双像素密度（上）和标准的像素密度（下）
您还可以添加一个图像的物理宽度和高度适当的文件源内srcset属性而不是定义像素密度。
与lt；img的srcset=“image-320w.jpg 320w，image-640w.jpg响应”src=“image-640w jpg。”alt=“” / >；
如果你选择去选择后者，图像将被缩小到浏览器的窗口的宽度–如果你不使用高度或宽度属性。浏览器中选择该设备的适当的文件。如果您的设备有一个高达320像素的屏幕宽度，浏览器将使用的文件image-320w.jpg。如果分辨率超过320像素，它将使用的文件image-640w.jpg。
通过使用尺寸属性，您可以调整图像显示的宽度。你将需要指定媒体信息随着优先图像宽度。
与lt；img的srcset=“image-320w.jpg 320w，image-640w.jpg响应”尺寸=“（最小宽度：320px）50vw，（大宽度：320px）100vw”src=“bild-640w jpg。”alt=“” / >；
在上面的例子中，图像将被缩小到50%的视口的宽度（50vw）为至少320像素视口的宽度（最小宽度：320）。如果它小于320像素，图像将占据整个视口的宽度（100vw）。
html5-css3-pixeldichte-sizes
不同宽度：在景观模式在肖像模式和50%视图100%
你可以只定义像素密度（例如，2）或宽度和高度（例如，320w 160h）内srcset文件参考。把它们结合起来，这是不可能的。
的srcset属性也有了新的作品<图片>以及与之相关的<源>元素的<图片>元素允许你定义不同的显示窗口大小的图像。你也可以定义为不同的像素密度的来源。
与lt；图片与gt；
与lt；源的srcset=“image-640w.jpg，image-640w@2x.jpg 2x”媒体=“（最小宽度：320px）” / >；
与lt；源的srcset=“image-320w.jpg，image-320w@2x.jpg 2x”媒体=“（大宽度：320px）” / >；
与lt；img src=“image-640w jpg。”宽度=“320”高度=“160”alt=“” / >；
与lt；/图片与gt；
在上面的例子中，四文件的来源是通过两个<源>元素文件image-320w.jpg和image-320w@2x.jpg将用于显示窗口的宽度小于320像素（取决于像素密度）。文件image-640w.jpg和image-640w@2x.jpg将被用于超过320像素的宽度。记住，<源>元不知道宽度和高度属性。如果你想定义尺寸，你需要使用css。
别忘了提供img > <后备老的浏览器。
的srcset和尺寸属性，以及<图片>元，由chrome 38 +和firefox 38支持+。internet explorer目前不支持的属性和元素。android的chrome版本40和ios 8.1版本的safari浏览器。safari，然而，支持尺寸只有部分。
如果你想使用srcset不支持的浏览器的属性，你可以得到一个polyfill，模仿旧的浏览器的功能。
css3和image- set()
您还可以定义使用css3不同像素密度不同的图像来源。这是可以做到的image- set()。类似于html5的属性srcset，你可以引用多个文件通过url()。image- set()可用于图像源是指通过url()。
身体{背景—图片：url（“汞。jpg”）；背景—图片：图片—配置（url（“汞。jpg”）1x，url（“hg@2x.jpg”）2）；
}
在上面的例子中，两个像素密度是指通过背景图像image- set()。目前，你应该与合适的供应商前缀标记符号，例如，- webkit-image- set()。再次，它可能会撤退是一个好主意。这是很重要的回退image- set()。浏览器不知道image- set()将忽略第二背景图像财产所有其他浏览器将执行第二个属性和覆盖第一个。
html5-css3-pixeldichte-hg
高分辨率的背景（上）和“正常”的分辨率的背景（下）
的image- set()符号是目前支持ios的safari chrome 31 +，7.1 +，和android的chrome 40 +。firefox和ie浏览器不支持它。
除了image- set()符号，它支持不同的像素密度的图像，也有媒体查询最小分辨率和大分辨率考虑不同的像素密度，任何css属性。
@媒体屏幕（min—分辨率：2dppx） {身体{背景：url（“hg@2x.jpg”）；
}
}
在上面的例子中，一个背景图形显示双像素密度是指通过最小分辨率。单位dppx代表每像素点代表的像素密度。但也有其他单位dpi（每英寸点数），它允许你在一个打印分辨率提供图像，或dpcm（点每厘米）。你应该使用单位dppx屏幕。
的分辨率特征是由铬+ 31和firefox 35 +支持。internet explorer支持特征从9版本只有与dpi单元。android的chrome支持从40版本和ios版本7.1–但是safari，只有旧的符号设备最小像素比例或大装置像素比例。
替代方案：仅在高分辨率为位图
新的html5元素和属性允许你为不同的分辨率和像素密度图像；然而，你通常会产生一个不同的图像文件。内容管理系统如网页自动做这件事，但手工制作的项目，它没有一个服务器端的编程语言，你需要手动生成文件的变种。
那些想备用的费用也要考虑高像素密度可以采取中间路线，这需要所有的像素密度只有一个文件。创建双分辨率–好品质下降–图像文件并将其嵌入在html文档中一半的分辨率。对于一个640×320图像就会像这样：
与lt；img src=“image-640w jpg。”宽度=“320”高度=“160”alt=“” / >；
而高清晰度屏幕显示完整的物理分辨率，屏幕图像标准规模下降到一半大小。使用标准的像素密度时，你不会注意到任何质量损失的扩大。双像素密度仍然提供了一个比你会得到正常分辨率的图像质量更好。
另一方面，标准分辨率的显示器会下载一个不必要的大文件。因此，应该只使用高度压缩的jpeg文件。
html5-css3-pixeldichte-kompression
高度压缩的jpeg文件的一半的分辨率（上）
图像也可以合并使用css双分辨率。财产背景大小使您可以缩小图像的分辨率的一半。
身体{背景—图片：url（“汞。jpg”）；背景—大小：32px 16px；
如果例子中的背景图像的分辨率为64×32像素，它将一半的大小显示。所以，这是同样的效果，就像在html的例子。
使用svg和iconfonts
所有新的浏览器支持基于svg格式的矢量。特别是标志，但也有许多其他的图形元素的矢量图形和嵌入为gif或png文件在网站。由于svg格式，也可以显示在一个网站的矢量图形，不管你使用html通过img >
svg的优势应该清楚：这是基于矢量的，它将始终显示在好分辨率，此外，它使带宽和节省时间，因为它不需要提供不同的分辨率和像素密度。
图标字体的高清晰度显示svg的一个很好的选择。基于矢量字体也因此表现在好分辨率。
如果你想对冲你的赌注svgs，不排除旧的浏览器不支持svg，你可以把后备方案的一些技巧。
使用javascript确定像素密度
有时，载入图片，通过javascript，例如，在画廊。你可以直接装载正确的图像源与适当的像素密度而不是生成一个img > <元素的所有srcset引用通过javascript。
javascript知道财产devicepixelratio这表明，像素密度。
如果 （窗口。devicepixelratio 与gt； 1） {文件相对应的（“img”）【0]。src = “image@2x.jpg”；
}
在上面的例子中，一个图像文件将如果像素密度高于1载。从逻辑上讲，物业只能读。
有一件事你应该记住，当使用devicepixelratio：价值由该属性取决于浏览器的实际放大因子。如果一个文件是在150%浏览器缩放显示，devicepixelratio提供一个值1.5–标准的像素密度。双像素密度的显示值3在相同的缩放因子。
结论与相关链接
获取web项目准备的高清晰度显示器可以是一个相当具有挑战性的任务。然而，高像素密度应始终考虑，特别是在新项目上工作时。所有的解决方案可以很容易地配备了回退，那么你就跑不离开旧的浏览器的风险。


外贸人如何接听海外客户的英文电话
制作一款小程序要多少钱？
青岛SEO优化怎么做效果好？整合网络营销立竿见影！
手机移动端网站制作的要求有哪些
提高流量与pv值的有效办法
如何提升O2O业务用户体验
企业进行品牌网站定制的意义有哪些？
新网站的页面如何快速收录？