那么就会一个物理像素对应4个位图像素必威:,

聊天响应式图片

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

别老是望着“外人的妹子”,请小心黄色箭头,DPOdyssey正是装备像素比,分歧的像素比,会彰显差异的图形。

脚下显示屏密度有:1x、2x、3x、4x。

3.2 新专门的学问的srcset、sizes属性,w描述符

旧版本的srcset使用多少某个局限性,然而好在的是到二〇一四年,大家早就有了全新的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(除非你的微管理器是Mini版),会先出示大图片,随后固然你收缩显示器,小图片即便会加载,你能够在调整台的“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,不能够接Nabi例。

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>

将图片的最大开间设置为 百分之百,以保险图像不会超过其父级成分的增加率,假如父级成分的大幅产生转移,图片的大幅度也任何时候退换,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

本文由必威发布于必威-前端,转载请注明出处:那么就会一个物理像素对应4个位图像素必威:,

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。