Web 开发中的响应式图片解决方案 - 文章教程

Web 开发中的响应式图片解决方案

发布于 2017-11-02 字数 4624 浏览 2116 评论 0

我们在使用响应布局的时候会考虑,手机上的图片没必要和电脑上的一样大。如果是从大到小的方法设计,那大屏幕的图片在小屏幕上会被缩小,增加了大量的空间。如果是从小到大的方法设计,那小屏幕的图片在大屏幕上会被拉伸到模糊。有什么方法可以兼顾小屏幕和大屏幕,这里引进了响应图片的概念。

Web 开发中的响应式图片解决方案

响应式图片

我们知道响应式的核心就是根据屏幕的大小,选择不同的 CSS 样式,那么图片是不是也可以通过判断不同大小的屏幕,然后选择性的加载不同尺寸的图片,由 Filament Group 提出的响应式图片技术思想,有助于解决上面提到的问题。

不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。

这项技术支持多数的现代浏览器,包括 IE8+、Safari、Chrome 和 Opera,以及这些浏览器的移动设备版本,在 FireFox 及一些旧浏览器中,则会优雅降级,我们仍可得到小图片的输出,但同时原始大图也会被下载。

Picturefill

Picturefill 允许 Web 开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。

使用方法

首先引入JS(需要在HTML文档头部引用)

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

为了使你的网页能够有效的加载,建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载 picturefill,不需要等待它加载完成之后再去加载其余的内容。如果你添加这个属性,你需要在引人 picturefill 之间加入一行脚本,同时也是为了让老的浏览器在 picturefill 还没有完成加载时遇到 picturefill 可以识别 picture 元素。

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js" async></script>
</head>

注意:如果你文档中已经包含了 HTML5 shiv(例如:Modernizr),那么你就不需要包含这段 JS 脚本。当然许多高级的使用者可不需要这样,而是选择像 Require.js 一样动态的加载 picturefill。(类似 AMD 和 CommonJS 的支持包括在脚本)。

一旦你已经包括 picturefill.js,你就可以开始添加响应图像元素到您的网站,Picturefill 增加了对响应图像解决方案,包括图像元素和新的 img 元素属性的整个套件的支持。

使用 srcset 属性

<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x">

使用 srcsetsizes 属性

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w">

其中 sizes 定义 img 显示的尺寸,srcset 定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。

使用 picture 属性

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="examples/images/art-medium.jpg">
</picture>

picture 中的 type 属性

Picturefill 支持 SVG 和的 WebP 作为其核心的一部分,但以下 MIME 类型可以通过 typesupport 插件一起使用:

image/bmp
image/xbmp
image/jp2
image/vnd.ms-photo
video/vnd.mozilla.apng

<picture>
  <source srcset="examples/images/large.webp" type="image/webp">  
  <img srcset="examples/images/large.jpg">  
</picture>

CSS3伪类

我们都知道可以用 ::before::after 伪元素和 content 属性来动态显示一些内容或者做其它很酷的事情,而且在 CSS 2.1 中即被支持。不过 content 属性在 CSS 2.1 中只能用于这两个伪元素中,而在 CSS3 中,任何元素都可以使用 content 属性了,这个方法就是结合 CSS3 的 attr 属性和 HTML 自定义属性的功能:

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="Web 开发中的响应式图片解决方案">
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

当然这些方法也有不足之处,比如 PC 端宽屏幕需要加载两个图片文件,然后我们也要为此准备多张图片文件。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3