经DavidAtanda许可翻译的文本。除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站外，我们还使用一些较少使用或相对较新的功能来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应式图像到相对较新的CSS函数，无论我们是否使用媒体查询都可以使用。事实上，当媒体查询与这些功能一起使用时，它更像是一种补充，而不是一种完整的方法。让我们看看它是如何工作的。TrueResponsiveImages对于图像，我们经常使用width:100%来适应图像。这种方法比较有效，但是对于较大的屏幕，如果图像的像素不够高，图像看起来会有些模糊，而且这种方法也有一些缺点，其中最显着的是：图像可能是扭曲到失去焦点的地步。屏幕较小的设备也应该为大屏幕下载大图像。在网络上使用图像时，我们必须确保它们在分辨率和尺寸方面得到优化。原因是为了确保我们为正确的设备拥有正确的图像分辨率，这样我们就不会最终为较小的屏幕下载超大图像，这最终可能会降低网站的性能??。简而言之，我们需要将更大的高分辨率图像发送到更大的屏幕，并将更小、分辨率更低的版本发送到更小的屏幕，从而提高性能和用户体验??。HTML提供了元素，它可以根据添加的媒体查询指定要呈现的确切图像资源。如前所述，我们不是将一张图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定一组图像以在特定情况下使用。在这个例子中，picture.png是最大尺寸的图片.除此之外，我们定义了图片的第二大版本picture-lg.png，尺寸按降序递减，直到最小版本picture-sm.png。注意我们还是这样使用mediaquery,但元素本身驱动响应行为，而不是在CSS中定义断点??。根据图像的大小适当添加媒体查询：Viewports>=1000pxloadpicture.pngViewportsbetween601pxand999pxloadimage-lg401px到600px之间的.pngviewports将加载picture-mid.png而小于400px的将加载image-sm.png有趣的是，我们还可以在URL标记每个图像后传递图像密度1x、2x、3x等。这如果我们缩放图像不同。这允许浏览器根据屏幕的像素密度和视口的大小来决定下载哪个版本。但是请注意我们最终定义了多少图像：接下来我们看一下嵌套的元素的两个标签：和![]()
.浏览器寻找第一个具有匹配当前视口宽度的媒体查询的元素，然后它会显示合适的图像（在srcset属性中指定）。![]()
元素是需要作为元素的最后一个子元素，如果没有源标记匹配它，则作为回退选项。我们还可以使用srcset属性来使用图像密度来处理仅使用元素的响应图像：我们可以做的另一件事是根据设备本身的屏幕分辨率（通常以每英寸点数或dpi为单位）在CSS中编写媒体查询，而不仅仅是设备视口。也就是说不是下面的@mediaonlyscreenand(max-width:600px){/*Stylestuff*/}而是@mediaonlyscreenand(min-resolution:192dpi){/*Stylestuff*/}这个方法可以让我们自定义设备本身屏幕分辨率以确定要渲染的图像，这在处理高分辨率图像时很有帮助。基本上，这意味着我们可以为支持高分辨率和低分辨率的小版本屏幕显示高质量的图片。值得注意的是，虽然移动设备的屏幕较小，但它们通常具有较高的分辨率，这也表明仅依靠分辨率可能不是一个好的做法。它可能导致大图像以高分辨率提供给非常小的屏幕，这是不可取的。body{background-image:picture-md.png;/*thedefaultimage*/}@mediaonlyscreenand(min-resolution:192dpi){body{background-image:picture-lg.png;/*高分辨率*/}}<图片>鉴于强大的图像响应能力，为了与这个想法保持一致，我们可以利用CSS特性，例如object-fit属性，当与object-position一起使用时，裁剪图像以获得更好的焦点，同时保持图像纵横比。因此，要更改图像的焦点：@mediaonlyscreenand(min-resolution:192dpi){body{background-image:picture-lg.png;object-fit:cover;object-position:100%150%;/*movesfocustowardthemiddle-right*/}}在CSS中设置最小值和最大值min()函数指定元素可以收缩到的绝对最小尺寸。这有助于帮助文本大小在不同的屏幕尺寸上正确缩放，例如永远不要让流畅的字体大小低于清晰的字体大小：html{font-size:min(1rem,22px);/*Staysbetween16pxand22px*/}min()接受两个值，可以是相对值、百分比或固定单位。在这个例子中，我们告诉浏览器永远不要将.box类元素的宽度减小到45%或600px以下（以最小的视口宽度为准）：.box{width:min(45%,600px)}If45%计算出来小于600px，浏览器会使用45%作为宽度。反之，如果45%计算出的值大于600px，则600px将用作元素的宽度。max()函数也有类似的情况。它也接受两个值，但我们没有定义元素的最小大小，而是定义了它可以获得的最大大小。.box{width:max(60%,600px)}如果60%的计算值大于600px，浏览器将使用60%作为宽度。反之，如果60%的值小于600px，则将600px作为元素的宽度限制值。clamp()函数的作用是在一个上限和一个下限之间限制一个值，当这个值超出最小值和最大值的范围时，选择一个介于最小值和最大值之间的值来使用。它接收三个参数：最小值、首选值、最大值。、、、
