高分辨率设备及其性能总是与时俱进

发布日期:2015-09-20 22:47:15
设备及其性能总是与时俱进。事实上,我们不仅仅要面对不同的视口尺寸,还得考虑高
分辨率显示屏。iPhone 4是第一款被广泛使用的高分辨率设备。它的屏幕大小为 960乘以
640 像素,分辨率为每英寸 326 个像素,是上一个版本 iPhone(iPhone 3GS)及 2011 年
的 15" MacBook Pro笔记本分辨率的两倍。预计其他设备,从平板电脑到笔记本电脑再到
台式机都会跟风。幸好,我们的响应式工具已经提供了方法,可以为这类设备提供增强
支持。
假设我们要为使用高分辨率设备的用户加载一个高分辨率版本的网站标志图片。最近在
重新设计个人网站时,我就遇到了这种情况。我的网站标志区域
的代码如下:
<div class="logo">
<a href="http://www.mcykj.com">网站制作</a>
</div>
对应的 CSS规则如下:
#container header[role="banner"] .logo a {

background-image: url("../img/logo2.png");

background-repeat: no-repeat;
background-size: contain;
display: block;
height: 7em;
margin-top: 10px;
}
最初显示效果如下:
高分辨率设备及其性能总是与时俱进

看起来很好,但我想让标志在高分辨率设备上也尽可能清晰。所以,我制作了两个新版
本的图片(一个用于默认状态,一个用于悬停状态) ,图片尺寸是原来的两倍,然后将其
分别命名为 logo2@x2.png 和 logo2Over@x2.png 。之后在 CSS中追加如下代码:
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
#container header[role="banner"] .logo a {
background-image: url("../img/logo2@x2.png");
}
#container header[role="banner"] .logo a:hover {
background-image: url("../img/logo2Over@x2.png");
}
}
上面的媒体查询匹配最小设备像素比为 1.5的设备。因此,像 iPhone 4以及后续出现的高
分辨率设备就会使用该媒体查询内的样式。你可能注意到样式中包含了 -webkit- 前缀。
和以前一样,记得针对各种设备添加对应的私有前缀。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计