移动Web—CSS为Retina屏幕替换更高质量的图片_weixin_30851409的博客-程序员宅基地

 

来源:互联网  作者:佚名  时间:12-24 10:37:45  【大 中 小】
点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Retina屏幕设备显示更好质量的图片,用来提高用户的体验;在本文中,你将看到如何使用CSS3技巧在Web应用中为Retina屏幕替换更高质量的图片

特别声明:此篇文章根据Stéphanie Walter 的英文文章《The Mobile Web: CSS Image Replacement for Retina Display Devices 》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。

有很多设备的“devicePixelRatio”都大于1.5或者等于2(window.devicePixelRatio = 物理像素/dips)。我的三星项目就是个最新的iPhone和iPad版本设置了“devicePixeRatio”等于“2”。Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战。

移动Web上CSS为Retian屏幕替换图片

移动应用程序的设计师们已经学会了如何为Retina屏幕设备显示更好质量的图片,用来提高用户的体验。他们为普通显屏和Retina屏幕提供两套图片,以及为Android设备创建了四套不同尺寸大小的图片。

iPhone5和New iPad已经开始采用了Retina屏幕显示技术。在本文中,你将看到如何使用CSS3技巧在Web应用中为Retina屏幕替换更高质量的图片。

代码背后的故事

这一切都始于为iPhone创建一个jQuery Mobile的应用程序。当时的想法是想使用一个完整的“HTML5 jQuery Mobile”应用程序,并使用“Phonegap”将其嵌入到“Native Shell”中。

对于这个应用程序,我在在底部创建了一个标签栏,在顶部放置了一个logo,以及模仿了一个ios的标签栏。"header"和“footer”部分都采用了图片替换文本的技术,在顶部显示了logo图标,在底部显示了对应的工具标签icon。

故事就这样发生了,当我在iPhone 4s的设备上进行测试时,我看见顶部的logo和底部的icon图标都被放大,并且看起来模糊,视觉效果非常的差。

DEMO

移动Web上CSS为Retian屏幕替换图片

为了更好说明问题,我在本机上创建了一个类似于iOS的应用程序,这样你就能搞清楚是怎么一回事。不管你有没有Retina设备,如果你要测试都可以用你的手机点击,同进你也可以点击下载源码。(如果你想模仿做一个简单的手机移动页面,这也是一个例子哟)。

正如我所说的,如果你在一个非视网膜装置上加载页面,看起来是一个不错的效果,但是你在一个Retina装置上加载页面,那么页面上的图片将会栅格化,看起来比较模糊。

由于像素比例(devicePixeRatio)是2,这个时候图片也将放大两倍,此时就造成了图片在设置中显示时被拉伸,呈现出来的时候就模糊不清。下面从iPad3中,iPhone4和”三星“设备中截取的一些被栅格化的图像截图。

三星(Galaxy Nexus)下的效果

移动Web上CSS为Retian屏幕替换图片

iPhone4下的效果

移动Web上CSS为Retian屏幕替换图片

iPad 3下的效果

移动Web上CSS为Retian屏幕替换图片

图片替换的技术

在这个案例中,为Retina替换图片,采用不同的技巧将会有不同的效果。

我们需要替换的第一张图片是顶部的logo。在此处确保只设置高度不设置宽度。

HTML 结构 

复制代码
代码如下:

<div class="ui-header" >
<h1> My logo </h1>
</div>

CSS代码

复制代码
代码如下:

.ui-header h1{
color:#fff;
display: block;
outline: 0 none !important;
overflow: hidden;
margin:0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-indent:-9999px;
background:url(img/logo.png) no-repeat center center;
height:33px;
}

请注意:在这里只设置高度不要设置宽度

 

第二个就是给删除按钮添加图片。我们保留了文本,只是使用“:before”伪类为按钮添加一个“icon”。

HTML 结构 

复制代码
代码如下:

<p><a href="#" > Delete item </a></p>

CSS代码

复制代码
代码如下:

.delete:before{
content: " ";
display:block;
width:20px;
height:20px;
position:absolute;
left:6px;
background:url(img/delete.png) no-repeat;
}

此处,给元素同时设置了宽度和高度,但是没有设置内距。

 

接下来是给下载按钮添加图标。

HTML结构

复制代码
代码如下:

<p><a href="#" > Download </a></p>

CSS 代码 

复制代码
代码如下:

.download {
background:rgb(222, 227, 232) url(img/nuage.png) no-repeat 8px 6px;
border:1px solid rgb(199, 206, 212);
padding: 25px 0 25px 120px;
font-size:20px;
color:rgb(144, 160, 176);
text-shadow: 0 1px 1px rgb(239, 242, 245);
}

这是调用图片的第三种方法,在这种方法里只设置了内距,并没有设置任何宽度和高度。

 

不过制作footer上的icon,我们还是设置了高度和宽度,而且还有内距。

HTML结构

复制代码
代码如下:

<a class="bubble button" href="#" > bubble </a>

CSS代码

复制代码
代码如下:

.ui-footer .button{
background-color:rgba(187, 185, 185, 0.2);
border:1px solid rgb(22, 22, 22);
box-shadow: 0px 1px 2px rgba(22, 22, 22, 0.5) inset ;
text-indent:-9999px;
padding:10px 15px;
width:40px;
height:40px;
background-position: center center;
background-repeat:no-repeat;
margin: 0 5px;
}
.bubble{
background-image:url(img/bubble.png);
}
在非视网膜下,我们还有别的不同方案来制作图片替换的效果。

 

像素(Pixel-Ratio)查询解决方案

接下来是想办法让这些设置加载质量更好的图片。我想起了“device-pixel-ratio”媒体查询像素比。我从来没有使用过,但是我决定试一试,使用这个属性,你需要加上一些浏览器厂商的前缀。

这个想法非常简单,我决定为Retina屏幕设备加载一张两倍大的图片,当我为IOS应用程序时,我选择了@2x的方式为Retina设备加载了高质量的图片。我最终是这样操作的。

复制代码
代码如下:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#myelement{
background:url([email protected]) no-repeat;
}
}

你肯定会认为这样做就好了,是的,Retina设备加载了高质量的图片,但是问题是这张图片像素是普通设备加载的图片两倍大小。这样一来仍然没有解决问题。下图是三星设备上显示效果,图片不在模糊了,但还不是完美的方案。

 

移动Web上CSS为Retian屏幕替换图片

借用background-size属性完成

现在我们加载了适合Retina设备的图片,但是我们需要解决图片显示的尺寸问题,让图片尺寸在Web中显示正确。为了实现这个效果,我们需要借用强大的background-size属性,根据需要调整背景图片的尺寸。你只需要使用“百分值”或“auto”值设置宽度。

在代码中是很简单就能实现,(注:在这里使用ID为“#retina”为这个案例设置了background-size,当然你可以根据你自己的需要进行编写代码)。

你不记得吗?我们在为头部的logo写样式时,就没有设置宽度,只设置了高度,这就是一个技巧,我们此时只需要给元素的background-size设置背景图片的高度和元素的高度一样,而其中宽度保留auto。

复制代码
代码如下:

#retina .ui-header h1{
background:url(img/[email protected]) no-repeat center center;
background-size: auto 33px ;
}

对于删除按钮,就更容易了,我们给元素同时设置了宽度和高度,而没有设置任何内距,我们只需要给background-size设置两个值为100%;这样做的意思就是让图片百分之百的填充元素。

复制代码
代码如下:

#retina .delete:before{
background:url(img/[email protected]) no-repeat;
background-size: 100% 100% ;
}

对于下载按钮的图片就显得有点麻烦了,没有给元素设置任何宽度和高度,这个时候只能按照非视网膜下的图片尺寸来设置background-size的值。

复制代码
代码如下:

#retina .download {
background:rgb(222, 227, 232) url(img/[email protected]) no-repeat 8px 6px;
background-size: 70px 68px ;
}

对于页脚的icon,虽然我们设置了元素的宽度和高度,但是我们还有一个内呀,这样一来我们不得不给background-size设置一个明确的值:

复制代码
代码如下:

#retina .bubble{
background-image:url(img/[email protected]);
}
#retina .loupe{
background-image:url(img/[email protected]);
}
#retina .folder{
background-image:url(img/[email protected]);
}
#retina .ui-footer .button{
background-size: 40px auto ;
}

现在看起来就完美了

 

移动Web上CSS为Retian屏幕替换图片

HTML中的图片标签img怎么办?

上面介绍的只是样式中处理图片的方法,但是我们在HTML结构中也会有使用图片的。因为,你需要了解一些图片响应式的技巧。不过使用retina.js 也是一种很简单的方法,只需要在同一个文件目录下加载一张“@2x”的图片,然后同过js脚本来实现。除此之外还有一个Retina Images 插件可以实现,不过这个插件需要一些其他设置。

限制与结论

通过上面的案例你也看到了,每个案例都使用了不同的方法,如果你想做得比较好,你就需要熟悉background-size属性的使用。当然你也可以hack来实现,为非视膜和视网膜设置加载不同的图片。我也不是专家,我也不清楚为不同的设备加载不同的图片有何影响。如果你有兴趣可以测试一下。

background-size是css3的一个属性,这样就受到浏览器的限制。就算不使用background-size属性,而是使用两张不同的图片,这样缺点也不少,不易于维护,而且还要有足够的空间来加载这些图片。所以你要考虑清楚使用哪种技术,就算你加载了两倍大的图片来进行缩放,你也要考虑一下性能的问题。

总之,这是解决Retina屏幕下图片清晰流畅的好办法,但具体在项目中是否使用,应该不应该使用,还需要取决于你的项目需求。所以说,这种技巧并不适合于每个人。

进一步探索

如果你想不加载两个文件,让你的图标又好看,感兴趣的话,你可以看看制作的ICON或SVG制作的图片。你可以看看这篇文章,只可惜的是这里面介绍的技术还没有得到广泛的支持。

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

转载于:https://www.cnblogs.com/aimyfly/p/3738375.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30851409/article/details/97953046

智能推荐

修改cookie里的httpOnly为false_qq_31985407的博客-程序员宅基地_cookie httponly 删除

HttpServletResponse response = HttpContextUtils.getHttpServletResponse(); // 去掉cookie的httpOnly 让js可以获取cookie String header = response.getHeader("Set-Cookie"); int index; if(header !=null &amp;&amp; (index = header.in...

shell学习笔记 (8.2)_weixin_33912445的博客-程序员宅基地

8.2 grep和正则表达式8.2.1 模式范围定要抽取代码为4 8 4和4 8 3的城市位置,上一章中讲到可以使用[ ]来指定字符串范围,这里用4 8开始,以3或4结尾,这样抽出4 8 4或4 8 3。grep '48[34]' data.f8.2.2 不匹配行首如果要抽出记录,使其行首不是4 8...

3D游戏引擎技术架构设计_海洋个人博客-程序员宅基地_3d游戏引擎架构

市面上目前流行最广的游戏引擎,在2D领域是Cocos2d引擎,在3D领域是Unity3D。这二者分别占领2D游戏开发市场和3D游戏开发市场,虽然虚幻4也开始发力,引擎代码开源。但是由于它是C++编写的,对于一些初级用户使用起来比较困难,推广起来有点难度。除了上面提到的引擎还有一些开源的3D引擎,比如最著名的是Ogre图形引擎。这些引擎的开发对于开发者来说要求都比较高。在中国各大IT知名公司比如腾讯

Magento2开发人员认证考试_aislj的博客-程序员宅基地_magento认证

作为一个有理想有抱负的magento青年,有必要搞一个magento2开发者认证来证明自己。好处:1,提高了技能,因为更系统的学习2,提高了英文阅读能力,因为都是全英文考试3,找工作有含金量。国内估计没几家看这个证。国外很有前途。坏处:1,时间 若干2,金钱 260美金相关认证一,Magento2解决方案专家认证 (金牌)考试费:260刀认证链接:https://u.magento.com/cer...

微信支付apiV3编程实例php,PHP 微信小程序 微信支付 v3_咸鱼葱的博客-程序员宅基地

写小程序发现微信支付有了v3版本, 就想着接个新的支付看看, 结果发现,有毒,记录一下历程先是统一下单//统一下单public function wechartAddOrder($name,$ordernumber,$money,$openid){$url = "https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi";$urlarr = p...

随便推点

boundingbox回归_木木家-程序员宅基地

bounding box regression什么是IOU 为什么要做Bounding-box regression?  如上图所示,绿色的框为飞机的Ground Truth,红色的框是提取的Region Proposal。那么即便红色的框被分类器识别为飞机,但是由于红色的框定位不准(IoU回归/微调的对象是什么? Bounding-

词嵌入向量WordEmbedding的原理和生成方法_小鹿的爸爸-程序员宅基地

词嵌入向量WordEmbedding的原理和生成方法WordEmbedding的使用WordEmbedding的生成词嵌入向量(WordEmbedding)是NLP里面一个重要的概念,我们可以利用WordEmbedding将一个单词转换成固定长度的向量表示,从而便于进行数学处理。本文将介绍WordEmbedding的使用方式,并讲解如何通过神经网络生成WordEmbedding。WordEm...

electron中JS报错:require is not defined的问题解决方法_shadowfall的博客-程序员宅基地

解决办法:修改创建BrowserWindow部分的相关代码,设置属性webPreferences.nodeIntegration为 true ; contextIsolation为 false, var mainWindow = new BrowserWindow({ webPreferences: { // 解决electron require未定义 contextIsolation: false, nodeIntegration: true }

三国志战略版服务器维护延时,《三国志战略版》2021年8月4日维护更新公告:停服维护更新时间介绍..._曲继风的博客-程序员宅基地

三国志战略版手游将在2021年8月4日进行短暂的维护更新哦!想了解本次更新情况如何的小伙伴们,接下来就让我们一起来看一下吧!诸位主公,大家好!为了给大家带来更多游戏内容,同时为了维护游戏环境,保证主公的良好游戏体验,服务器将于2021年8月4日(周三)2:00~5:00进行停服维护更新,特为主公奉上相关更新信息:【赛季合并】调整范围:更新后所有处于三、四赛季的赛区调整说明:1.四、五赛季并入自选剧...

html固定按钮相对位置,css固定定位和绝对定位的区别是什么?_逆狗的博客-程序员宅基地

CSS固定定位和绝对定位的区别是什么?下面本篇文章就来给大家介绍一下固定定位和绝对定位的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。绝对定位绝对定位即脱离文档流的定位。定位参照物为自己的父级,但是自己的父级必须拥有position属性(父级position属性为static也不行,必须为absolute,relative,fixed中的一个)。如果自己的父级没有设置pos...

[转] ASP.NET 常见参考项目的 UI、BLL 、Model 、 DAL 分析_weixin_33717298的博客-程序员宅基地

应用/项目名称 UI层实现 Business Model &amp;amp; Logic Layer 实现 Data Access Layer 实现 Personal Web Site Starter K...