澳门新萄京:图片响应式解决方案,聊聊响应式
分类:澳门新萄京最大平台

聊聊响应式图片

2016/11/14 · HTML5 · 5 评论 · HTML5, 响应式图片

本文作者: 伯乐在线 - TGCode 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。
这篇文章主要内容:

  • 为什么要使用响应式图片
  • <picture>元素
  • img的srcset、sizes属性

1、为什么要使用响应式图片

假如有一张图片的显示宽度为200px,那么,它在 1x(即设备像素比为 1 的显示器) 的显示器上,是占了 200 个物理像素(即实际所占的像素);它在2x 的显示器上,实际上是占了 400 个物理像素;在 3x 的显示器上,实际上是占了 600 个物理像素;在 4x 的显示器上就是占了 800 个物理像素。

如果这个图片只提供 200 像素的尺寸,那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本,那么在 1x~3x 的设备上会显得多余,因为加载时间会相较长,所以我们要使用响应式图片。

我们有两种方法来设置响应式图片:

  • 使用<picture>元素(HTML5新增)
  • 使用img的srcset、sizes

2、picture元素

在HTML 5中,增加了一个新元素<picture>。用过<video>、<audio>的,会觉得<picture>的用法很熟悉:

<picture>   <source srcset="smaller.jpg" media="(max-width: 750px)">   <source srcset="default.jpg">   <img srcset="default.jpg" /> </picture>

1
2
3
4
5
6
7
8
9
<picture>
 
  <source srcset="smaller.jpg" media="(max-width: 750px)">
 
  <source srcset="default.jpg">
 
  <img srcset="default.jpg" />
 
</picture>

 

不知道你注意到没有,在 media 属性使用的语法与CSS媒体(media)特性中使用的语法一样。你可以使用相同的特性,也就是说你可以查询 max-width , min-width , max-height , min-height , orientation 等属性。

看到<picture>这个元素是不是很兴奋,可是不得不提醒你一句,目前来说,这个元素还是有兼容性问题的。

兼容性:兼容性

当然,如果你一定要使用<picture>这个元素,又要在其他浏览器里支持,那你就需要添加一个额外的插件:Picturefill2.0

<script src="picturefill.js"></script>

1
<script src="picturefill.js"></script>

虽然<picture>很方便,但如果你考虑到兼容性,还是要谨慎使用,不过,我们也有兼容性较好的另外一种处理响应式图片的方法,看下面。

3、img的srcset、sizes属性

当然,<img>元素自身也提供了响应式的属性:srcsetsizes

3.1 旧版本的srcset属性

在以前,我们是这样用的:

<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

1
<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" />

这段代码什么意思呢?

浏览器根据屏幕不同的像素密度(x)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。

看图:

澳门新萄京 1

澳门新萄京 2

别老是看着“别人的妹子”,请注意红色箭头,DPR就是设备像素比,不同的像素比,会显示不同的图片。

目前屏幕密度有:1x、2x、3x、4x。

3.2 新标准的srcset、sizes属性,w描述符

旧版本的srcset使用多少有些局限性,不过幸好的是到2014年,我们已经有了全新的srcset,而且还多一个size是属性。

使用新的srcset,我们只需要提供图片资源以及断点,浏览器会去自动匹配最佳显示图片。

使用方法如下:

<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

1
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。。

澳门新萄京 3

澳门新萄京 4

注意:如果你用pc浏览器测试这段代码,一定要先进入移动模式,因为一打开页面时可视区大于500px(除非你的电脑是迷你版),会先显示大图片,随后即使你缩小屏幕,小图片虽然会加载,你可以在控制台的“Network”里看到,但是显示的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会自动匹配最佳显示的图片。

srcset用来提供图片资源,sizes属性的作用类似媒体查询,用来设置图片尺寸的临界点。

sizes="[media query] [length], [media query] [length]..."

1
sizes="[media query] [length], [media query] [length]..."

要保证使用sizes 里计算出来的宽度始终是图片所占屏幕宽度(length)。

为什么说sizes属性的作用类似媒体查询呢?

因为它只是支持部分媒体查询,比如:

(min-width: 400px) (not (orientation: landscape) ) ( (orientation: landscape) and (min-width:400px) ) ( (orientation: portrait) or (max-width: 500px) )

1
2
3
4
5
6
7
(min-width: 400px)
 
(not (orientation: landscape) )
 
( (orientation: landscape) and (min-width:400px) )
 
( (orientation: portrait) or (max-width: 500px) )

 

但它不支持我们明确的定义媒体类型:比如screen或者print等等。

除了使用px外,我们还可以使用em、px、cm、vw…,甚至CSS3的calc,不能使用百分比。

sizes=”(max-width: 320px) calc(100vw – 20px), 128px”

表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。

兼容性查看:兼容性

3.3 常见的使用场景

(1)如果图片的宽度是整个视口的百分比,那么sizes可以这样设置:

sizes="80vw"

1
sizes="80vw"

(2)假如图片两侧的边距各为10px,我们可以这样设置:

sizes="calc( 100vw - 20px)"

1
sizes="calc( 100vw - 20px)"

(3)如果有一个两侧边距为10px的图片,允许它的最大宽度为500px,我们可以这样设置:

sizes="( min-width:520px) 500px, calc(100vw - 20px)"

1
sizes="( min-width:520px) 500px, calc(100vw - 20px)"

上面的代码表示当可视区大于520px时,图片宽度为500px,否则宽度为calc(100vw – 20px)计算的值。

打赏支持我写出更多好文章,谢谢!

打赏作者

原文
“响应式(Responsive)”这个词我想大家没有听过一千遍,也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了,比如:《自适应页面设计》。在这篇文章中,我们不讲页面布局的响应式,我们主要来看看“响应式图片”。这篇文章主要内容:
为什么要使用响应式图片

响应式设计


所谓的响应式设计,是指在不同的屏幕分辨率,不同的像素密度比,不同宽度的终端设备中,网页布局可以自适应的调整。响应式设计的本意是使原本 PC 上的网站兼容移动终端,大部分响应式网页是通过媒体查询,加载不同样式的 CSS 文件实现的。这样的弹性化布局使网站在不同的设备终端布局都比较合理。
虽然响应式设计的好处多多,但是也有诸多缺陷。由于 PC 端和移动终端访问的是同一个网站,PC 端可以不计较流量限制,但是移动端不可能不计较。

澳门新萄京 5

响应式布局示意图

为适配不同终端机型的屏幕宽度和像素密度,我们一般会使用如下方法设置图片的 CSS 样式:

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

将图片的最大宽度设置为 100%,以确保图像不会超出其父级元素的宽度,如果父级元素的宽度发生改变,图片的宽度也随之改变,height:auto 可以确保图片的宽度发生改变时,图片的高度会依据自身的宽高比例进行缩放。
这样当我们在移动设备上访问响应式网页里的图片时,只是把图片的分辨率做了缩放,下载的还是 PC 端的那张大图,这样不仅浪费流量,而且浪费带宽,而且会拖慢网页的打开速度,严重影响用户的使用体验。

背景

众所周知,retina屏的设备像素比是2,而普通屏幕像素比为1,对于图片这种位图像素已定的资源,如果不加以处理的话,要么全都用1倍图,在retina屏上观看就会模糊;要么都是用2倍图,那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度。

简单介绍下css像素和位图像素的区别:

  • 无论是retina屏还是普通屏幕,图片展示的区域大小是相同的,这也就是css像素与设备无关。
  • retina屏一个1x1的css像素区域对应着2x2的物理像素,也就是每个css像素宽的区域,在retina屏上是可以再分成两半来显示的,即dpr=2的retina屏上的最小css像素分辨率是0.5px。

理论上,一个位图像素是对应一个物理像素的时候展示完美:

1、假如在retina屏使用1倍图:也就是1个位图大小的区域去用4个物理像素渲染,被分割的位图只能就近取色,就会导致图片显示模糊;
2、同样的,如果在普通屏幕上使用2x图,那么就会一个物理像素对应4个位图像素,就会通过一定算法,给该物理像素一个近似的值,(downsampling过程),图片不会模糊,但会缺失一些锐度。

目前主流方案(使用二倍图):

img{
    max-width:100%;
    height:auto;
}

而图片展示的情况在如今也是应用的越来越多,所以要找到两者完美匹配的方法,也就是——响应式图片。

创建响应式网格视图

接下来我们来创建一个响应式网格视图。

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

确保边距和边框包含在元素的宽度和高度间。

添加如下代码:

* {
    box-sizing: border-box;
}

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门新萄京 6澳门新萄京, 澳门新萄京 7

2 赞 14 收藏 5 评论

<picture>元素

新的解决方案:<picture>


  • <picture>是 HTML5 的一个新元素;
  • 如果<picture>元素与当前的<audio>,<video>元素协同合作将增强响应式图像工作的进程,它允许在其内部设置多个<source>标签,以指定不同的图像文件名,根据不同的条件进行加载;
  • <picture>可以根据不同的条件加载不同的图像,这些条件可以是视窗当前的高度(viewport),宽度(width),方向(orientation),像素密度(dpr)等;

举几个栗子

  1. 如下栗子中针对不同屏幕宽度加载不同的图片;当页面宽度 在 320px 到 640px 之间时加载 minpic.png;当页面宽度大于 640px 时加载 middle.png
<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

澳门新萄京:图片响应式解决方案,聊聊响应式图片。2. 如下栗子中添加了屏幕的方向作为条件;当屏幕方向为横屏方向时加载_landscape.png 结尾的图片;当屏幕方向为竖屏方向时加载 _portrait.png 结尾的图片;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>
  1. 如下栗子中添加了屏幕像素密度作为条件;当像素密度为 2x 时加载_retina.png 2x 的图片,当像素密度为 1x 时加载无 retina 后缀的图片;

    this is a picture
  2. 如下栗子中添加图片文件格式作为条件, 当支持 webp 格式图片时加载 webp 格式图片,当不支持时加载 png 格式图片;

    this is a picture

5. 如下例子中添加宽度描述;页面会根据当前尺寸选择加载不大于当前宽度的最大的图片;

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">
  1. 如下例子中添加 sizes 属性;当窗口宽度大于等于 800px 时加载对应版本的图片;

         sizes="90vw" 
         srcset="picture-landscape-640.png 640w,
                 picture-landscape-1280.png 1280w,
                 picture-landscape-2560.png 2560w">
    

    this is a picture

      sizes="90vw" 
      srcset="picture-160.png 160w,
              picture-320.png 320w,
              picture-640.png 640w,
              picture-1280.png 1280w">
    

兼容性:

目前只有 Chrome , Firefox , Opera 对其兼容性较好,具体兼容性如图:

澳门新萄京 8

兼容性示意图

优点:

  1. 加载适当大小的图像文件,使可用带宽得到充分利用;
  2. 加载不同剪裁并具有不同横纵比的图像,以适应不同宽度的布局变化;
  3. 加载更高的像素密度,显示更高分辨率的图像;

步骤:

  1. 创建<picture></picture>标签;
  2. 在这些标签内创建一个你想用来执行任何一个特性的<source></scource>标签;
  3. 添加一个 media 属性,用来包含你想要的特性,如宽度(max-width,min-width),方向(orientation)等;
  4. 添加一个 srcset 属性,属性值为相应的图像文件名称,进行加载。如果你想提供不同的像素密度,例如 Retina 显示屏,可以添加额外的文件名到 srcset 属性中;
  5. 添加一个回退的<img>标签;

CSS解决方案——媒体查询

最大缺点:只能用于css,所以也就限定了只有background中的图片可以使用此方法。
简介一下:

@media 
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (-min-moz-device-pixel-ratio:2),//版本低于16的Firefox
only screen and (min-resolution:2dppx),
only screen and (min-resolution:192dpi){
...
}

像七牛这样专业的图片处理应用都可以根据需求生成一倍图,这样对于不同分辨率的显示器,也可以使用不同分辨率的图片。另外的不足是使用媒体查询多了不少代码,个中利弊,具体情况下再权衡吧。

resolution :定义设备的分辨率。

澳门新萄京 9

resolution兼容性

dppx:也是设备像素比,和dpr一样。
dpi:(Dots Per Inch)每英寸点数。
1dppx=96dpi
【小科普:1参考像素即为从一臂之遥看解析度为96DPI的设备输出即1英寸96点)时,1点(即1/6英寸)的视角。 】

另外,在最新的以webkit为内核的浏览器中,支持支持CSS4的background-image新规范草案image-set,在移动端也勉强可以接受吧。

澳门新萄京 10

image-set属性兼容性

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

不支持image-set的浏览器会解析background-image中的背景图像;支持image-set的浏览器就会根据是否为retina屏选择相应的背景图,因此这个方案是可以实现向下兼容的。

背景图片

如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变:
如果 background-size 属性设置为 "100% 100%" ,背景图片将延展覆盖整个区域
如果 background-size 属性设置为 "cover",则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

关于作者:TGCode

澳门新萄京 11

路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

澳门新萄京 12

img的srcset、sizes属性

<picture>的工作原理


  • <picture>语法

由上面的示例代码可知,在没有引入 js 和第三方库,CSS 中没有包含 media queries 的情况下,<picture>元素可以实现只用 HTML 来声明响应式图片;

  • <source>元素

<picture>标签它本身没有属性。神奇的地方是 <picture>被用来当做<source>的容器。
<source>元素,是用来加载多媒体的比如视频和音频,已经被更新用到图片的加载并且一些新的属性已经被添加:

  • srcset (必需)

接受单一的图片文件路径 (如:srcset=”img/minpic.png”).
或者是逗号分隔的用像素密度描述的图片路径 (如:srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。

  • media (可选)

接受任何验证的 media query, 你可以看到在 CSS @media 选择器 (如:media=”(min-width: 320px)”).
在之前的<picture>语法的例子里已经用到了。

  • sizes(可选)

接收单一的宽度描述 (如:sizes=”100vw”) 或者单一的 media query 宽度描述 (如:sizes=”(min-width: 320px) 100vw”).

或者逗号分隔的 media query 对宽度的描述 (如:sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一个被当做默认的。

  • type(可选)

接受支持的 MIME 类型 (如: type=”image/webp” or type=”image/vnd.ms-photo”)

浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的<source>元素并忽略掉后面的<source>标签。

  • 添加最后的<img>元素

<img>元素在<picture>内部用来当浏览器不支持时或者没有源标签匹配时的显示。在 <picture>内使用<img>标签是必须得,如果你忘记了,将不会有图片显示出来。

<img>来声明默认的图片显示。将<img>标签放到<picture>内的最后,浏览器在找到<img>标签之前会忽略<source>的声明。这个图片标签也需要你写上它的 alt 属性。

HTML解决方案——srcset sizes w标识符

这是HTML5推出的属性,srcset可以根据显示器分辨率智能加载最佳显示的图片。

澳门新萄京 13

srcset属性兼容性

<img class="image" src="mm-width-128px.jpg" 
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" 
sizes="(max-width: 360px) 340px, 128px">

srcset :指向提供的图片资源,为用户提供了一种内嵌简单的分辨率媒体查询功能;

sizes : 指定图片宽度,不能使用百分比,可使用:
px,
vw(100vw就是占满父容器宽度,所以要求图片居中宽度为百分比的地方可以使用vw单位,如 sizes=80vw),
calc运算(适用于两边距离固定的情况,如sizes="calc(100vw-20px)"),
媒体查询(如sizes="(min-width:360px) 340px,128px")。

而且最重要的是,sizes属性产生的初衷就是可以在html中实现简单的媒体查询功能,来适应越来越大规模的响应式网站开发。

那么w是个啥?
w是一个衡量宽度的标识符,一定要对应图片的真实宽度,这会使得浏览器正确的选择图片,如果w值和图片宽度不对应时,实际渲染是会有问题的。

拿这段代码来说:

<img class="image" src="test-240.jpg"   
    srcset="test-240.jpg 240w, test-480.jpg 480w, test-720.jpg 720w" 
    sizes="240px"> 

sizes=240px,也就是图片宽度设置为了240px,那么:
当该屏幕dpr==1时,就会选用test-240.jpg;

澳门新萄京 14

dpr==1

dpr==2时,可渲染的位图像素宽度就变为了480px,也就选用了test-480.jpg;

澳门新萄京 15

dpr==2

dpr==3时,能渲染的位图像素宽度变为了720px,那么浏览器去选择最适合的图片,也就是test-720.jpg;

澳门新萄京 16

dpr==3

关于w值设置如果不正确,会出现什么后果,我在这篇文章中写了详细的案例。

澳门新萄京:图片响应式解决方案,聊聊响应式图片。现代浏览器对该属性的支持是越来越多了,这个方案应该会是个潮流。
在移动端andriod browser的支持度实在是太差劲了,PC端对于一些fashion的网址试一试。

不同设备显示不同图片

body {
    background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

可以使用媒体查询的 min-device-width 替代 min-width 属性,它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时,图片大小不会改变。

/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

 

1、为什么要使用响应式图片
假如有一张图片的显示宽度为200px,那么,它在 1x
(即设备像素比为 1 的显示器) 的显示器上,是占了 200 个物理像素(即实际所占的像素);它在 2x
的显示器上,实际上是占了 400 个物理像素;在 3x
的显示器上,实际上是占了 600 个物理像素;在 4x
的显示器上就是占了 800 个物理像素。
如果这个图片只提供 200 像素的尺寸,那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本,那么在 1x~3x 的设备上会显得多余,因为加载时间会相较长,所以我们要使用响应式图片。
我们有两种方法来设置响应式图片:
使用<picture>元素(HTML5新增)

javascript解决方案

  • 基于jquery的HiSRC插件,可以基于网速和是否为retina屏来显示图片。
<div class="hisrc">
 <img src="placehold.it/200x100.png" data-1x="placehold.it/400x200.png" data-2x="placehold.it/800x400.png">
</div>

然后调用hisrc的方法

$(document).ready(function(){
  $(".hisrc img").hisrc();
})

官方文档是这样介绍HiSRC如何工作的:正常情况下会直接加载src中的资源;如果网速较好就会加载data-1x中的资源替代原来src的文件;如果设备像素比又比较高的话,就会加载data-2x中的资源代替原来的src中的图片。

它还提供选项允许我们设置一个网速基准。这个html的结构让我不由得想起了lazyload的解决方案,这俩真的是太相似了,我们完全可以给src中放一个统一的占位图,然后再去选择加载适合浏览器展示的图片。

另外还有用于rails的gem包:hisrc-rails.
所以也可以写成这样

responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")

对于这个方案,个人觉得在工程上应用是可以期待的,因为图片都放在七牛那儿,可以图片上传成功后从2倍图中处理出1倍图,然后再向img标签中添加data-1x,data-2x这样的属性,不过呢,这好像把工作几乎全部添加给了后台的哥们儿,想到这儿,好像应用的难度瞬间增大了呢。。。

  • picturefill方案,依赖picturefill.js这个脚本文件,并且它还对结构有一定的要求,对格式有特定的要求,最开始这个来自于对<picture>的支持。
<picture>
     <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)"> 
     <source srcset="default.jpg, default_retina.jpg 2x"> 
     <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

澳门新萄京 17

<picture> element兼容性

看到该结构要写这么多代码,多少就会产生一点心理抗拒,但是呢本着技术进步的态度,还是再进一步研究下。
由于picture元素是html5的新产物,兼容性上还不是特别好,要想大规模使用可以配合picturefill.js,另外现在picturefill也支持有srcset属性的img。
这里有picturefill在应用<picture>的页面中存在的一些问题 。
//主要是IE9和安卓2.3上存在一些问题,不过IE9通过hack方法也是可以挽救的。

最后,两句话介绍一下服务端解决方案:
Adaptive Images:最大缺点基于PHP和Apache。它是拦截通过服务器的图片请求来生成图片,如果图片是通过第三方的分网网络的也就用不上了。

HTML5 <picture> 元素

HTML5 的 <picture> 元素可以设置多张图片。

<picture> 元素类似于 <video> 和 <audio> 元素。可以设备不同的资源,第一个设置的资源为首选使用的:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

使用img的srcset、sizes

综上

不过既然picturefill也支持srcset,那么比较srcset属性和picture元素,浏览器对srcset属性的支持是更好的。所以srcset sizes w的img元素配合picturefill.js效果应该会不错。只是很可惜,这样的应用案例还没有找到。不过即使picturefill.js不能完美配合srcset方案,仅仅使用srcset sizes w就可以应付主流现代浏览器了,重要的是,这个方案完全也是向下兼容的啊。

video

2、picture元素
在HTML 5中,增加了一个新元素<picture>。用过<video>、<audio>的,会觉得<picture>的用法很熟悉:

参考:

http://www.tuicool.com/articles/ZraMfa
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-images.html
http://scottjehl.github.io/picturefill
https://www.ze3kr.com/2015/08/using-srcset/#section-6

使用 max-width 属性

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例,但不会超过其原始大小:

video {
    max-width: 100%;
    height: auto;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<picture>
<source srcset="smaller.jpg" media="(max-width: 750px)">
<source srcset="default.jpg">
<img srcset="default.jpg" />
</picture>

不知道你注意到没有,在 media 属性使用的语法与CSS媒体(media)特性中使用的语法一样。你可以使用相同的特性,也就是说你可以查询 max-width , min-width , max-height , min-height , orientation 等属性。
看到<picture>这个元素是不是很兴奋,可是不得不提醒你一句,目前来说,这个元素还是有兼容性问题的。
兼容性:兼容性
当然,如果你一定要使用<picture>这个元素,又要在其他浏览器里支持,那你就需要添加一个额外的插件:Picturefill2.0(http://scottjehl.github.io/picturefill/)
<script src="picturefill.js"></script>

虽然<picture>很方便,但如果你考虑到兼容性,还是要谨慎使用,不过,我们也有兼容性较好的另外一种处理响应式图片的方法,看下面。
3、img的srcset、sizes属性
当然,<img>元素自身也提供了响应式的属性:srcset
和sizes

3.1 旧版本的srcset属性
在以前,我们是这样用的:
<img src="width-128px.jpg" srcset="width-128px.jpg 1x, width-256px.jpg 2x" /

这段代码什么意思呢?
浏览器根据屏幕不同的像素密度(x)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。
看图:

澳门新萄京 18

澳门新萄京 19

别老是看着“别人的妹子”,请注意红色箭头,DPR就是设备像素比,不同的像素比,会显示不同的图片。
目前屏幕密度有:1x、2x、3x、4x。
3.2 新标准的srcset、sizes属性,w描述符
旧版本的srcset使用多少有些局限性,不过幸好的是到2014年,我们已经有了全新的srcset,而且还多一个size是属性。
使用新的srcset,我们只需要提供图片资源以及断点,浏览器会去自动匹配最佳显示图片。
使用方法如下:
<img src="width-128.jpg" srcset="width-128.jpg 128w, width-512.jpg 512w" sizes="(max-width: 500px) 128px, 512px" />

上面这段代码的意思表示:不支持srcset属性时,使用src中的图片,否则浏览器会自动匹配最佳显示图片;sizes
属性的值表示当可视区宽度不大于500像素,则图片宽度显示为128px,其他情况下,图片宽度显示为512px。。

澳门新萄京 20

澳门新萄京 21

注意:如果你用pc浏览器测试这段代码,一定要先进入移动模式,因为一打开页面时可视区大于500px(除非你的电脑是迷你版),会先显示大图片,随后即使你缩小屏幕,小图片虽然会加载,你可以在控制台的“Network”里看到,但是显示的依旧会是大图片,因为前面大图片已经缓存了,而浏览器会自动匹配最佳显示的图片。
srcset用来提供图片资源,sizes
属性的作用类似媒体查询,用来设置图片尺寸的临界点。
sizes="[media query] [length], [media query] [length]..."

要保证使用 sizes
里计算出来的宽度始终是图片所占屏幕宽度(length)。
为什么说sizes
属性的作用类似媒体查询呢?
因为它只是支持部分媒体查询,比如:
(min-width: 400px)

(not (orientation: landscape) )

( (orientation: landscape) and (min-width:400px) )

( (orientation: portrait) or (max-width: 500px) )

但它不支持我们明确的定义媒体类型:比如screen或者print等等。
除了使用px外,我们还可以使用em、px、cm、vw…,甚至CSS3的calc
,不能使用百分比。
sizes=”(max-width: 320px) calc(100vw – 20px), 128px”
表示当视区宽度不大于320像素时候,图片宽度为整个视区宽度减去20像素的大小。
兼容性查看:兼容性
3.3 常见的使用场景
(1)如果图片的宽度是整个视口的百分比,那么sizes可以这样设置:
sizes="80vw"

(2)假如图片两侧的边距各为10px,我们可以这样设置:
sizes="calc( 100vw - 20px)"

(3)如果有一个两侧边距为10px的图片,允许它的最大宽度为500px,我们可以这样设置:
sizes="( min-width:520px) 500px, calc(100vw - 20px)"

上面的代码表示当可视区大于520px时,图片宽度为500px,否则宽度为calc(100vw – 20px)计算的值。

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:图片响应式解决方案,聊聊响应式

上一篇:澳门新萄京:移动应用,Web移动应用 下一篇:没有了
猜你喜欢
热门排行
精彩图文