响应式图像教程

网页在不同尺寸的设备上,都有良好的显示效果,叫做”响应式设计”(responsive web design)。

响应式设计的网页图像,就是”响应式图像”(responsive image)。

响应式图像的解决方案有很多,JavaScript 和 CSS 都可以实现。本文介绍最简单的、语义性最好的 HTML 方法,浏览器原生支持。

一、问题的由来

我们知道,<img>标签用于插入网页图像,所有情况默认插入的都是同一张图像。


<img src="foo.jpg">

上面代码在桌面端和手机上,插入的都是图像文件foo.jpg

这种处理方法固然简单,但是有三大弊端。

(1)体积

一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。

(2)像素密度

桌面显示器一般是单倍像素密度,而手机的显示屏往往是多倍像素密度,即多个像素合成为一个像素,称为 Retina 屏幕。图像文件很可能在桌面端很清晰,放到手机上会有点模糊,因为像素扩充了。

(3)视觉风格

桌面显示器的面积较大,图像可以容纳更多细节。手机的屏幕较小,许多细节是看不清的,需要突出重点。

上面两张图片,下方的手机图片经过裁剪以后,更突出图像重点,明显效果更好。

二、像素密度的选择:srcset属性

为了解决上一节的这些问题,HTML 语言提供了一套完整的解决方案。首先,<img>标签引入了srcset属性。

srcset属性用来指定多张图像,适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串,每个部分都是一张图像的 URL,后面接一个空格,然后是像素密度的描述符。请看下面的例子。


<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">
 

上面代码中,srcset属性给出了三个图像 URL,适应三种不同的像素密度。

图像 URL 后面的像素密度描述符,格式是像素密度倍数 + 字母x1x表示单倍像素密度,可以省略。浏览器根据当前设备的像素密度,选择需要加载的图像。

如果srcset属性都不满足条件,那么就加载src属性指定的默认图像。

三、图像大小的选择:srcset属性 + sizes属性

像素密度的适配,只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕,显示不同大小的图像,srcset属性就不够用了,必须搭配sizes属性。

第一步,srcset属性列出所有可用的图像。


<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     src="foo-1280.jpg">

上面代码中,srcset属性列出四张可用的图像,每张图像的 URL 后面是一个空格,再加上宽度描述符。

宽度描述符就是图像原始的宽度,加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。

第二步,sizes属性列出不同设备的图像显示宽度。

sizes属性的值是一个逗号分隔的字符串,除了最后一部分,前面每个部分都是一个放在括号里面的媒体查询表达式,后面是一个空格,再加上图像的显示宽度。


<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">

上面代码中,sizes属性给出了三种屏幕条件,以及对应的图像显示宽度。宽度不超过440像素的设备,图像显示宽度为100%;宽度441像素到900像素的设备,图像显示宽度为33%;宽度900像素以上的设备,图像显示宽度为254px

第三步,浏览器根据当前设备的宽度,从sizes属性获得图像的显示宽度,然后从srcset属性找出最接近该宽度的图像,进行加载。

假定当前设备的屏幕宽度是480px,浏览器从sizes属性查询得到,图片的显示宽度是33vw(即33%),等于160pxsrcset属性里面,正好有宽度等于160px的图片,于是加载foo-160.jpg

注意,sizes属性必须与srcset属性搭配使用。单独使用sizes属性是无效的。

四、<picture>标签,<source>标签

上面两节分别解决了像素密度和屏幕大小的适配,但是如果要同时适配不同像素密度、不同大小的屏幕,应该怎么办呢?

这时,就要用到<picture>标签。它是一个容器标签,内部使用<source><img>,指定不同情况下加载的图像。


<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

上面代码中,<picture>标签内部有两个<source>标签和一个<img>标签。

<source>标签的media属性给出媒体查询表达式,srcset属性就是<img>标签的srcset属性,给出加载的图像文件。sizes属性其实这里也可以用,但由于有了media属性,就没有必要了。

浏览器按照<source>标签出现的顺序,依次判断当前设备是否满足media属性的媒体查询表达式,如果满足就加载srcset属性指定的图片文件,并且不再执行后面的<source>标签和<img>标签。

<img>标签是默认情况下加载的图像,用来满足上面所有<source>都不匹配的情况。

上面例子中,设备宽度如果不超过500px,就加载竖屏的图像,否则加载横屏的图像。

下面给出一个例子,同时考虑屏幕尺寸和像素密度的适配。


<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

上面代码中,<source>标签的media属性给出屏幕尺寸的适配条件,每个条件都用srcset属性,再给出两种像素密度的图像 URL。

五、<source>标签的type属性

除了响应式图像,<picture>标签还可以用来选择不同格式的图像。比如,如果当前浏览器支持 Webp 格式,就加载这种格式的图像,否则加载 PNG 图像。


<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

上面代码中,<source>标签的type属性给出图像的 MIME 类型,srcset是对应的图像 URL。

浏览器按照<source>标签出现的顺序,依次检查是否支持type属性指定的图像格式,如果支持就加载图像,并且不再检查后面的<source>标签了。上面例子中,图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

六、参考链接

Responsive Images 101, Jason Grigsby Responsive images, MDN

css知多少(3)——样式来源与层叠规则

1. “层叠”的概念

CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。举一个简单的例子:

上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式。“层叠”是个叠加的过程,可通过下图表示:

 

上面用一个简单的例子来说明了层叠的过程,形象的体验一下。

层叠是CSS的核心机制,理解了它才能以最经济的方式写出最容易改动的CSS,让文档外观在达到设计要求的同时,也给用户留下一些空间,让他们根据需要更改文档的显示效果,例如调整字号。——摘自《CSS设计指南》

2.样式来源

上文中提到,css之所以有“层叠”的概念,是因为有多个样式来源。其实css的样式来源有5个,开发人员只能接触到后面3个。

       第一,浏览器默认样式表

当你不为html设置任何样式时,显示在浏览器上,b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢?

因为浏览器自带一个默认的样式,如果html中没有为标签设置样式,则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的,一旦有其他地方设置了标签样式,浏览器默认样式就会被冲掉。

注意,不同浏览器的默认样式有些地方是不一样的。例如,我们在写css时,都会首先设置 * {margin:0; padding:0;},这是为何?就是因为有浏览器兼容性问题。干脆,全部弄成0,这样各个浏览器就都统一了。

此处先把默认样式的代码贴出来 ,我们下一节专门解说默认样式,有很多值得玩味的地方。

浏览器默认样式
1 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/
 2 li { display: list-item }/*默认以列表显示*/
 3 head { display: none }/*默认不显示*/
 4 table { display: table }/*默认为表格显示*/
 5 tr { display: table-row }/*默认为表格行显示*/
 6 thead { display: table-header-group }/*默认为表格头部分组显示*/
 7 tbody { display: table-row-group }/*默认为表格行分组显示*/
 8 tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
 9 col { display: table-column }/*默认为表格列显示*/
10 colgroup { display: table-column-group }/*默认为表格列分组显示*/
11 td, th { display: table-cell; }/*默认为单元格显示*/
12 caption { display: table-caption }/*默认为表格标题显示*/
13 th { font-weight: bolder; text-align: center }/*默认为表格标题显示,呈现加粗居中状态*/
14 caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/
15 body { margin: 8px; line-height: 1.12 }
16 h1 { font-size: 2em; margin: .67em 0 }
17 h2 { font-size: 1.5em; margin: .75em 0 }
18 h3 { font-size: 1.17em; margin: .83em 0 }
19 h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
20 h5 { font-size: .83em; margin: 1.5em 0 }
21 h6 { font-size: .75em; margin: 1.67em 0 }
22 h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
23 blockquote { margin-left: 40px; margin-right: 40px }
24 i, cite, em,var, address { font-style: italic }
25 pre, tt, code, kbd, samp { font-family: monospace }
26 pre { white-space: pre }
27 button, textarea, input, object, select { display:inline-block; }
28 big { font-size: 1.17em }
29 small, sub, sup { font-size: .83em }
30 sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
31 sup { vertical-align: super }/*定义sub元素默认为上标显示*/
32 table { border-spacing: 2px; }
33 thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/
34 td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/
35 s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/
36 hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
37 ol, ul, dir, menu, dd { margin-left: 40px }
38 ol { list-style-type: decimal }
39 ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
40 u, ins { text-decoration: underline }
41 br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
42 :before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
43 center { text-align: center }
44 abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
45 :link, :visited { text-decoration: underline }
46 :focus { outline: thin dotted invert }
47  /* Begin bidirectionality settings (do not change) */
48 BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
49 BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
50 *[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
51 *[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
52 @media print { /*定义标题和列表默认的打印样式*/
53     h1 { page-break-before: always }
54     h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
55     ul, ol, dl { page-break-before: avoid }
56 }

       第二,用户样式表

在一些新闻网站中,经常看到可以设置字体大小的快捷菜单,例如下图就是搜狐新闻中的设置。

这些是给一些有视觉障碍的人看的,反正我是没用过,我也有视觉障碍,不过我是通过近视镜来解决的。

其实浏览器也有这样的设置,例如chrome浏览器中,我们就可以设置字号和字体。

用户在这里设置了字体和字号之后,它们会覆盖掉浏览器默认的样式。

       第三,<link>引用的css文件

引用css文件,大家应该都比较熟悉了。

       第四,<style>中编写的样式代码

<style>中编写样式也都比较熟悉。

       第五,<a style=’ ’>中编写的样式代码

标签style属性中编写样式,也都用过吧。

 

后面这三种是咱们程序开发中比较常用的,这里就不多说了,不了解的朋友需要去补一补基础知识了。

3.层叠的规则

由于样式的来源不同,浏览器在加载样式时,需要计算出最终的样式值,这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

下面是举例说明:

如上图,不同来源的两个样式,第一个样式设置了font-weight,第二个没有,浏览器会把它叠加在一起,即浏览器会把各个零散的整合成一个整体。第一个样式color:red,第二个样式color:blue,浏览器会让后者覆盖前者,最终结果还是color:blue。

覆盖的默认规则是后者覆盖前者,但是又一个特殊情况——!important。

如上图。虽然color:blue是后来者,但是它没有居上,因为前者color:red跟着!important。这就像得到一个尚方宝剑,有最高执行权,其他人统统让路,否则佛挡杀佛。

转载:http://www.cnblogs.com/wangfupeng1988/p/4277959.html