图片是 Web 页面上最重要的媒体元素，它可有效的向用户传递信息，但在 Web 的近三十年发展历史中，它们的适应性一点都不强。关于图片的一切，比如图片的尺寸、格式和裁剪都被其单一的 src 属性设定像顽石一样的固定下来。特别是当高清屏幕（高分辨率屏幕）和 Web 响应式设计的到来，Web 开发者更进一步感受到了图片在 Web 上使用的限制。庆幸的是，近几年随着 Web 技术的发展，<img> 元素也得到进一步的改变，它不再局限于 src 属性引入图片，也不在局限于 width 和 height 属性设置图片尺寸。Web 开发者可以使用新的 srcset 和 sizes 属性让图片更好的适应于高分辨率的屏幕和响应式设计。除此之外，HTML5 还提供了一个新的元素标记 <picture> 来更改显示的图片以适应不同的图片显示尺寸，而且还可以在background-image 使用 image-set() 函数为不同DPR屏幕显示不同图片。虽然在《聊聊img元素》一文中详细介绍过 <img> 的使用，而且在该文中有介绍过 srcset、sizes 以及 HTML5 的 <picture> 的使用，但并无法很好的帮助大家在响应式设计中使用图片。为了更好的了解和掌握响应式图片在Web中的使用，将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

响应式图片在响应式 Web 设计中一直以来都是较为头疼的地方，除了图片的适配难于处理之外，还有就是图片的加载问题。庆幸的是，HTML 给 <img> 标签新增了srcset和sizes属性，我们可以在这两个属性上提供足够的信息，来告诉浏览器，从而让浏览器自已根据所对应的环境加载最合适的图片。那么在这一部分，我们主要来探讨 <img> 的 srcset和sizes属性，以及了解浏览器是如何根据这些信息来选择合适的图片。如果你对这方面知识感兴趣的话，请继续往下阅读。

CSS的原生嵌套、作用域（@scope）、级联层（@layer）和容器查询（@container）被称为 下一代 CSS，并且在整个社区得到热议。比如，刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询（@container），更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变，将对Web设计生态系统的发展产生巨大的影响。因为，容器查询将使单个元素有可能根据局部的环境进行调整，而不是依赖整个视窗的尺寸。从今天开始，我将和大家一起进入容器查询的世界，和大家一起了解为什么需要容器查询，它们将来何使Web设计和开发变得更轻松，最重要的是，容器查询将现更强大的组件和布局，尤其是响应式的布局。

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文，同时使用 @container 规则，可以在符合条件下为查询容器的后代单独指定样式规则。简单地说，可以使用 CSS 容器查询，让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性，这个功能模块中除了 contain 和 @container 之外，还新增了一个容器属性 container，也可以使用 container 和 @container 结合实现容器查询效果。在这篇文章中，我们就来看看 container 和 @container 是如何工作的，它们可能会有哪些功能！感兴趣的同学，请继续往下阅读！

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革，十年后的今天，CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大，但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过，庆幸的是，现代的一些 Web 技术（比如，Flexbox、Grid、媒体查询和比较函数等）让我们离容器查询特性更近一步。今天我们来看看，这些现代Web技术是如何让我们离容器查询更近一步。

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用，并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步，但这些内容都只是和大家聊的是如何使用，以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候，也提到过，CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么，今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学，请继续往下阅读。

这是有关于响应式图片使用的第三部分，在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语；第二部分主要和大家聊的是<img>新增属性srcset和sizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的<picture>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话，请继续往下阅读。

前面我们花了较多的篇幅围绕着 HTML 的 <img> 和 <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcset 和 sizes 属性大不同环境下提供不同尺寸的图片；在 <picture> 中使用 <source> ，并且结合media、srcset、sizes和type等属性可以为用户提供不同图片（环境不同提供不同的图片）和不同类型图片（type指定图片类型）等。但在 Web 开发中，很多时候还会使用背景图片（background-image）、边框图片（border-image）和蒙板图片（mask-image）等。我们接下来围绕着 CSS 中的背景图片（background-image）来展开，换句话说，在background-image中是否也可以像 <img> 和 <picture> 一样，根据用户环境来提供不同的图片。

自从著名设计师 Ethan Marcotte（@beep）在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。如果你对这方面话题感兴趣的话，请继续往下阅读。

在 CSS 中说起函数，我想很多人首先想到是 calc() 数学运算函数，其实在 CSS 中有很多种不同类型的函数，有些“CSS函数”可以在CSS中用于动态计算，比如 calc()函数，计数器函数 counter() 和 counters() 和 CSS比较函数 min()、max() 和 clamp()。尤其是 calc()、min()、max() 和 clamp() 这几个函数，在现代Web开发中所起的作用越来越大，使用的场景越来越多，带来的灵活性和扩展性越来越强。那么在这篇文章中，我们主要和大家一起来探讨 CSS 比较函数在实际开发中能用在哪些地方？又是如何帮助前端构建响应式UI？感兴趣的同学请继续往下阅读。