文档章节

『reprint』Pixel distortion

波利beryl
 波利beryl
发布于 2014/08/25 23:48
字数 1614
阅读 20
收藏 0



 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

什么是响应式图片?

响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。

CSS3 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:

.mod .hd h3 {
    background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
}

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
    background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
    background-size: 105px 155px;
}
}

两张图片的对比效果:

在制作@2x图片时需要注意一些问题:

如果类似上图一样是纯文字内容的图片,不要直接从大图片缩放为小图片,这样文字效果会有些失真,这是 Photoshop 渲染的问题。应该调整字号,再重新排版。可以直接看看:一淘首页 的效果。


蓝框内是直接缩放图片大小的效果,红框内是把字号从32号改成16号的效果。

CSS3 Media Queries 中用来定义设备分辨率的是 resolution 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询 Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中 的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素 宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与 最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3「image-resolution」属性中定义了一些单位,比如「dppx」,各浏览器支持情况如下:

 

特性 Chrome Firefox (Gecko) IE Opera Safari (WebKit)
基本特性 不支持「1」「4」 3.5 (1.9.1) 「2」 9 9.5 不支持 「1」「4」
dppx 「4」 16.0 未知 12.10「3」 「4」

 

需要注意几点:

  1. 「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章

  2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。

  3. 1dppx 相当于 96dpi。

显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。

「image-set」语法:

<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>

那么上面的例子我们可以改为:

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。

以下是一些常见移动设备的「min-device-pixel-ratio」值:

-webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac

  • 所有非 Retina 的 iOS 设备

  • Acer Iconia A500

  • Samsung Galaxy Tab 10.1

  • Samsung Galaxy S

  • 其他设备

-webkit-min-device-pixel-ratio: 1.3

  • Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

  • Google Nexus S

  • Samsung Galaxy S II

  • HTC Desire

  • HTC Incredible S

  • HTC Velocity

  • HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

  • iPhone 4

  • iPhone 4S

  • iPhone 5

  • iPad (3rd generation)

  • iPad 4

  • 所有 Retina displays 的 Mac

  • Google Galaxy Nexus

  • Google Nexus 4

  • Google Nexus 10

  • Samsung Galaxy S III

  • Samsung Galaxy Note II

  • Sony Xperia S

  • HTC One X

-webkit-min-device-pixel-ratio: 3.0

  • HTC Butterfly

  • Sony Xperia S

HTML5 响应式图片

CSS「image-set」 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月 @brucel  提出了HTML5 的一个解决草案:

<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的浏览器降级处理 -->
<img src=midres.png alt="">
</picture>

于此同时,其他的一些想法如雨后春笋般涌现出来,于是 W3C 社区讨论组 Responsive Images Community Group  应运而生。最新的规范在这里:http://picture.responsiveimages.org/ (W3C http://www.w3.org/TR/html-picture-element/)。截止本文发布时间,最近一次更新是 2013年4月24日,规范示例:

<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

但是 Apple 的 eoconnor 提出的方案是这样的:

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">



目前我们能做的就是在CSS 中使用「image-set」属性值,因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的,如果有特殊的需求可以使用 Media Queries。


一丝
2013-1-15

最后更新:2013-4-28

转载请注明原文地址:http://www.iyunlu.com/view/Front-end/70.html


本文转载自:

波利beryl
粉丝 21
博文 30
码字总数 5582
作品 0
成都
私信 提问
2015 CALLED THE INTERFACE OF 2014

Writer:BYSocket(泥沙砖瓦浆木匠) Reprint it anywhere u want. ”Hi , Happy New Year.Written in Stupid Enlish,Dont push me . ” 2014 System 2015 is coming.But 2014 is not over.......

泥沙砖瓦浆木匠
2015/01/01
45
0
09-11

09-10 Done IR-CPMG相位校正pascal集成(3h,100%) 相位校正测试 (1h,100%) Time-Dependent Distortion调研 (4h) 09-11 TO-DO List NiuMRI调试 Time-Dependent Distortion调研...

体全息
2018/09/11
1
0
介绍一些Java图像处理的常用算法实现包

Java Image Filters 是由 Jhlabs 开发的一组用来处理 Java 图像的类库,提供各种常用的图像处理效果,例如剪切、缩放、反转色、扭曲、水波纹、凹凸、黑白效果等等数十种效果。 该项目最大的问...

红薯
2010/04/26
7K
2
[Be a Coding Plasterer] Components 1:get Basic Thi

Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Written In The Font I am writing at home.Today it is windy,but I am feeling isuitabl......

泥沙砖瓦浆木匠
2015/01/17
104
0
『Reprint』GRADUAL

CSS渐变之CSS3 gradient在Firefox3.6下的使用 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=727 原文地址:http://hacks.mozilla.org/......

波利beryl
2014/08/09
38
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部