澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

Web品质优化体系,响应式广告和响应式图片

2019-11-10 作者:澳门新萄京赌场网址   |   浏览(157)

Web性能优化系列:借助响应式图片来改进网站图片显示

2015/06/22 · HTML5 · 响应式

本文由 伯乐在线 - yvonne 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:deanhume.com。欢迎加入翻译组。

开始使用 <picture> 元素

响应式网页设计太棒了,它改变了我们向手机端用户呈现内容的方式,无论用户使用何种尺寸的手机,我们都能够为其提供定制化的体验。响应式网页设计使用起来很灵活,也容易上手。然而,如果没有正确使用,它会对网页性能带来负面影响。

用于在 PC 端展示的图片对于手机来说太大了。我们知道,在手机设备上大尺寸高分辨率的图片会大大降低页面加载性能。响应式设计和非固定图片(fluid image)在保证正确显示的同时,也保证大图片在页面显示的性能大大提高。Tim Kaldec 对响应式图片的研究表明,使用响应式图片策略最多可以减少图片72%的负担。72%,这是一个相当大的数量。

过去这些年里,出现了一些响应式图片解决方案,开发人员也习惯了使用这些方案来解决响应式图片问题。但都现在看来,这些方法都有一点hacky的味道。这就是 <picture> 元素被引入的原因。

澳门新萄京官方网站 1

<picture> 元素作为一种向不同设备输出高性能图片数据的客户端解决方案,目前已经纳入 WHATWG HTML 规范 。为了向大家展示 <picture> 元素的强大,我们一起来看一个简单的例子。

XHTML

<picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element."> <p>This is some accessible text.</p> </picture>

1
2
3
4
5
6
7
<picture>
   <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
   <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
   <source srcset="dest/320/tiger.jpg">
   <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element.">
   <p>This is some accessible text.</p>
</picture>

浏览器在解析上面的 HTML 语句时会根据设备的屏幕分辨率来选取大小最合适的图片。点击这个链接观看实际效果。

澳门新萄京官方网站 2

从上面的 HTML 代码可以看到, <picture> 元素由一组 <source> 标签组成。<source> 标签里面声明了设备的视口(viewport)宽度以及与之相应尺寸的图片。这样不同设备上的浏览器就可以根据这些信息选取最适合的图片源。这是一个出色的解决方案,因为所有的操作都是在客户端完成,开发者对展现给用户的图片具有控制权。

值得一提的是,通过设置 <img> 标签的 srcset 属性和 size 属性也可以达到相同的效果。这两个属性由 <img> 标签和 <source> 标签扩展而来,提供一系列图片资源和相应的图片大小。浏览器根据这些信息来选取最合适的图片。假如你不考虑图片的艺术美感,可以使用这种方法。

XHTML

<img src="dest/320/tiger.jpg" srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w" alt="A TIGER!!!">

1
2
3
<img src="dest/320/tiger.jpg"
  srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w"
  alt="A TIGER!!!">

如果你还想了解更多关于 <picture> 元素的历史和起源,推荐你读这篇文章。

响应式广告这里我们使用了第三方的插件来处理广告轮播图。
下面是选择第三方插件的方法:

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

聊聊响应式图片

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)来显示对应尺寸的图片,也可以说是根据设备的像素比来显示不同的图片。

看图:

澳门新萄京官方网站 3

澳门新萄京官方网站 4

别老是看着“别人的妹子”,请注意红色箭头,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。。

澳门新萄京官方网站 5

澳门新萄京官方网站 6

注意:如果你用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)计算的值。

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

打赏作者

创建响应式网格视图

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

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

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

添加如下代码:

* {
    box-sizing: border-box;
}

处理图片

<picture> 元素在网页性能上效果显著,同时也给我们带来很大的便利,问题是,我们怎样去生产这些不同大小的图片呢?假如你需要多份不同的图片,怎样得到这些图片呢?庆幸的是,有一种简单的方法可以解决这个问题。

使用 Grunt 响应式图片插件可以自动处理、剪裁图片。假如你对 Grunt 任务不熟,也不知道怎样将它引用到你的工程,请参考我之前发表的这篇博文。 Grunt 官网也提供了非常好的教学资源帮助你立刻开始使用它。

npm install grunt-responsive-images –save-dev

配置好 Grunt ,并且保证它能在你机器上运行之后,打开你的网站,在命令行里输入以下命令来下载相应的包。

npm install grunt-responsive-images –save-dev

接下来你还需要安装 ImageMagick 或 GraphicsMagick 命令行工具,然后配置 gruntfile.js 文件。下面是一个参数配置例子,有很多配置选项,可以根据实际需求设定不同的参数。

XHTML

grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'tmp/' }] } }, })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
grunt.initConfig({
  responsive_images: {
    myTask: {
      options: {
        sizes: [{
          width: 320,
          height: 240
        },{
          name: 'large',
          width: 640
        },{
          name: "large",
          width: 1024,
          suffix: "_x2",
          quality: 60
        }]
      },
      files: [{
        expand: true,
        src: ['assets/**.{jpg,gif,png}'],
        cwd: 'test/',
        dest: 'tmp/'
      }]
    }
  },
})

通过上面的参数设置,图片将生成 320 像素, 630 像素和 1024 像素的图片,每种像素的图片将放在不同的目录里。

现在,可以处理图片了。在命令行中运行 Grunt 命令,这个时候,可以看到目录下会新增加三个目录,每个目录中已经存在裁剪好了的图片! Hooray !

如果还在想什么工具可以自动帮助你生成相关的 HTML 标签的话,这个 Grunt 插件能替你做这些苦差事。把这个插件和 Grunt responsive images 插件结合起来用,会给你带来更多意外惊喜。

澳门新萄京官方网站 7

<picture>元素

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

任选一种支付方式

澳门新萄京官方网站 8 澳门新萄京官方网站 9

2 赞 14 收藏 5 评论

背景图片

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

OLDER BROWSERS

关注浏览器的新特性的同时,也要兼顾到老版本的浏览器。目前,只有 Chrome 38 和 Opera 支持 <picture> 元素。好消息是, <picture> 元素已经正式被 WHAT working group 接受,逐渐所有现代浏览器都会支持这个标签。通过 caniuse.com 可以查到,你喜欢的浏览器现在是不是支持它。

幸好,现在有一个插件可以解决大部分传统浏览器不支持 <picture> 元素的问题。 Filament Group 的团队开发出 picturefill.js 这个文件,这个插件可以使不支持 <picture> 元素的浏览器解析这个标签以及标签相关的属性。这意味着,你今天就可以开始使用 <picture> 元素了!

要使用这个插件,你需要在你的页面中添加这个 JavaScript 文件。

XHTML

<picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers."> <p>Accessible text.</p> </picture> <script> // Picture element HTML5 shiv for older browsers document.createElement( "picture" ); </script> <script src="picturefill.min.js" async></script>

1
2
3
4
5
6
7
8
9
10
11
12
<picture>
   <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
   <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
   <source srcset="dest/320/tiger.jpg">
   <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>
<script>
// Picture element HTML5 shiv for older browsers
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>

再补充一句,这个插件和 picture 标签的功能是一样的。点击这个链接可以看到实例效果。在 Responsive Images Community Group 网站上还有很多例子。

image.png

img的srcset、sizes属性

关于作者:TGCode

澳门新萄京官方网站 10

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

澳门新萄京官方网站 11

不同设备显示不同图片

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'); 
    }
}

 

附注

我第一次使用 picture 标签的时候,出现了这个错误:

“<source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead.”

这次错误提示信息非常明确,在引用图片资源时不要使用 src 标签,使用 srcset 标签就可以了。

1 赞 1 收藏 评论

这里我们选择处理图片的插件是OwlCarousel2
地址如下:https://github.com/OwlCarousel2/OwlCarousel2
优点如下:对响应式有好的支持,对不同的浏览器有很好的支持,最小的压缩包很小。
首先要引入下面的样式库:
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
接下来要引入下面的js:
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
如下轮播图 响应式图片使用了picturefill.js 文件 目的是处理不支持picture标签的浏览器来完成响应式图片的设置。
处理轮播图的样式代码如下所示:
<div class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img srcset="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img srcset="img/ad003.png" alt="新手秘籍">
</picture>
</div>
</div>
</div>
处理轮播图的js代码如下所示:
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
Web品质优化体系,响应式广告和响应式图片。});
接下来要处理的部分就是响应式图片了 根据不同的浏览器窗口大小进而处理不同的响应式的图片 根据 浏览器窗口大小进而相应图片大小

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

HTML5 <picture> 元素

Web品质优化体系,响应式广告和响应式图片。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>

关于作者:yvonne

澳门新萄京官方网站 12

简介还没来得及写 :) 个人主页 · 我的文章

澳门新萄京官方网站 13

如何实现响应式图片呢?

使用img的srcset、sizes

video

澳门新萄京官方网站 14

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

使用 max-width 属性

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

image.png

<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" /

澳门新萄京官方网站 15

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

image.png

澳门新萄京官方网站 16

澳门新萄京官方网站 17

澳门新萄京官方网站 18

别老是看着“别人的妹子”,请注意红色箭头,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" />

image.png

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

澳门新萄京官方网站 19

澳门新萄京官方网站 20

澳门新萄京官方网站 21

image.png

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

无论图片外面的元素的大小 也无论图片本身的大小 sizes 的大小设置就是当前设备的大小设置。不受到外界样式的干扰

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

使用媒体查询来完成响应式图片的设计。

(not (orientation: landscape) )

澳门新萄京官方网站 22

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

image.png

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

4.picture标签

但它不支持我们明确的定义媒体类型:比如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"

澳门新萄京官方网站 23

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

image.png

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

高级设置 针对不同的图片文件进行设置

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

澳门新萄京官方网站 24

image.png

Tip: 给出一个可以支持图片压缩的网站
https://tinypng.com

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:Web品质优化体系,响应式广告和响应式图片

关键词: