本文主要介绍了CSS的响应图像应用的srcset属性，这是在CSS入门学习的基本知识，你需要的朋友可以参考一下。





介绍

在整个网站的开发过程中，很难对图片进行管理，要注意图片在各种设备上的平滑过渡，以及遇到的问题：

适当地优化和缩小图片的体积
注意不要浪费带宽（或网站的成败不是主要因素之一）
该设备使用相应的解决方案。

对于第一个问题，TinyPng和JPEGmini工具的使用可以帮助减少图片的体积和优化图片。

对于第二个问题，在某些情况下，我们可能要使用一个强大的媒体查询。感谢他们，我们可以很容易地处理背景图像的问题，但在一些地方，IMG是用来显示图片。这是我们需要解决的第三个问题，最后一个问题是如何根据设备的分辨率调用正确的图像。

在这种情况下，有两个解决方案：该元素的srcset属性和元素。

在这篇文章中，我会给你介绍的srcset属性。

srcset属性

使用这个属性的主要好处是什么的优点是，Web开发者可以显示图像的高分辨率源于用户使用高分辨率，和使用其他来源的图像分辨率的其他用户。在第一种情况下，使用低PDD（像素密度的显示）不需要下载无用的高分辨率图像，并担心浪费带宽。后者可以享受高清设备带来的不同享受，在第二种情况下，我们可以根据不同的屏幕大小分配不同的图像，这主要是基于用户的设备来提供更好的图像源。

事实上，这样的srcset属性，指定基于像素密度或用户使用的屏幕大小的图像源。所以，的srcset属性允许浏览器提供一套建议让浏览器匹配正确的图像按照正确的行为。这样做这一点，我们已经改善了网络质量，同时提高加载网页，给用户更好的体验速度。

此时，这个属性的基本特性是根据指定的条件做出选择，使其工作。

W3C规范描述为srcset：srcset属性允许作者根据不同的分辨率或提多不同分辨率图像不同的窗口大小。用户代理选择已有的任何资源，从而避免了多个资源加载和浪费带宽和相关的性能问题。

说起这幅画的srcset属性，据估计，许多小伙伴能够跟上时代的脚步会在心里想：我知道，根据屏幕密度，真正的相应尺寸的图片，如。

上面的代码相当于这里的演示光邮票。当然，我们也可以写如下：

因为我们不是别人的，所以我们办公室的电脑显示的默认设备像素比是1，所以这些显示是128像素宽。随之而来的问题是，（不是挖掘机那佳强），如何让钓线显示模拟高设备像素比吗
方法1：
Chrome浏览器，开关设备模式，如下所示：


然后，选择相应的设备，如设备像素比的iPhone6 Plus，是3。


此时，刷新页面并加载大图，即256像素宽度的宽度。
方法二：


在这一点上比window.devicepixelratio设备像素是1.5，所以它装有一个256像素宽度的图片。图片有一种真相：


不同的2倍显示策略
有时，使用同样大小的高清图片作为2张相应的图片，虽然两张图片的大小几乎是一样的，但个人觉得它们仍然是2倍大小，以优化更大的图片更好。为什么
目的对srcset的最初目的是在高密度的屏幕显示更好的图片。如果世界只有，不同设备的密度。如果戏剧冲突，2万张图片是高清或2倍大小的地图。然而，事实上，生活中没有戏剧。在现代的网页布局中，有一个不容忽视的布局。即响应性布局。脚本总是这样的。PC浏览器显示大图像，移动浏览器显示小图片。不，同样的尺寸图需要，与设备像素有类似的戏剧性冲突。
因此，如果我们的2张图片使用高清地图和响应布局，那么我们可能需要4幅图像资源，即小地图、小地图HD和大图片、大图片高清，然而，2倍的图片需要2倍于图片的大小。我们只需要3个图片资源，即小、中、中、大。
在老一代的srcset规范过程中，W描述已考虑响应的布局，纠缠为例，以高清晰度的路线：


CSS代码将内容复制到剪贴板。







2倍于线的大小：


CSS代码将内容复制到剪贴板。







注：不照顾上述W描述的意义，因为W描述符srcset属性在新的意义的理解是完全不同的，为了避免我的心冥想3次冲突：忘记它，忘记它，忘记它，忽略它，忽略它，忽略它。你可以关注在能源、新规范和新尺寸的srcset属性语法意义。