超越媒体查询：具有更新的HTML和CSS功能的响应式设计

除了使用媒体查询和现代CSS布局（如flexbox和网格）来创建响应式网站外，我们还可以做一些被忽视的事情来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应式图像到相对较新的CSS函数，无论我们是否使用媒体查询都可以使用。事实上，与这些功能一起使用时，媒体查询更像是一种补充，而不是一种完整的方法。让我们看看它是如何工作的。真正响应式图像还记得我们何时可以在图像上硬编码width:100%然后下班吗？当然，这是有效果的，确实让画面更有弹性，但也有一些缺点，其中最明显的就是：画面可能会变形到失焦的地步。较小的设备仍会下载完整尺寸的图像。在网络上使用图像时，我们必须确保它们针对分辨率和尺寸进行了优化。原因是为了确保我们为正确的设备提供正确的图像分辨率，这样我们就不会最终为较小的屏幕下载非常大和沉重的图像，这可能会降低网站的性能。简而言之，我们希望确保将较大、高分辨率的图像发送到大屏幕，同时将较小、分辨率较低的变体发送到小屏幕，从而提高性能和用户体验。HTML提供了元素，它允许我们根据添加的媒体查询指定要呈现的确切图像资源。如前所述，我们不是将一张图像（通常是大的、高分辨率的版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定一组图像用于特定情况。<图片>在这个例子中，picture.png是全尺寸图像。从那里，我们定义图片的下一个最大版本picture-lg.png，尺寸逐渐减小直到最小版本picture-sm.png。请注意，我们仍在这种方法中使用媒体查询，但驱动响应行为的是元素本身，而不是在CSS中定义断点。已适当添加媒体查询以随图像大小缩放：viewports>=1000px将获得picture.png。601px和999px之间的视口将获得picture-lg.png。401px和600px之间的视口将获得picture-sm.png。任何小于400px的东西都会得到picture-sm.png。有趣的是，我们还可以在URL后面按图片密度标注每张图片——1x、2x、3x等。如果我们按比例制作不同的图片就好了，这样浏览器就可以根据像素密度来决定下载哪个版本了屏幕的大小和视口的大小。但请注意我们最终定义了多少图像：让我们看看特别是嵌套在元素中的两个标签：和。浏览器将查找第一个具有与当前视口宽度匹配的媒体查询的元素，然后将显示正确的图像（在srcset属性中指定）。元素是元素的最后一个子元素，如果没有原始源标记匹配，则用作回退。我们还可以通过srcset属性使用图像密度来处理仅使用元素的响应图像：我们可以做的另一件事是根据设备本身的屏幕分辨率（通常以每英寸点数或dpi为单位）在CSS中编写媒体查询，而不仅仅是设备视口。这意味着，而不是：@mediaonlyscreenand(max-width:600px){/*Stylestuff*/}我们现在有：@mediaonlyscreenand(min-resolution:192dpi){/*Stylestuff*/}这种方法允许我们根据设备的本机屏幕分辨率来决定要渲染的图像，这在处理高分辨率图像时很有用。基本上，这意味着我们可以在支持较高分辨率的屏幕上显示高质量的图片，并在较低的分辨率下显示较小的版本。值得注意的是，虽然移动设备的屏幕较小，但它们通常具有高分辨率。这意味着在决定渲染哪个图像时，仅仅依靠分辨率可能不是最好的主意。这可能导致在非常小的屏幕上显示高分辨率的大图像，这可能不是我们真正想要在这么小的屏幕上显示的版本。正文{背景图像：图片-md.png;/*默认图像*/}@mediaonlyscreenand(min-resolution:192dpi){body{background-image:picture-lg.png;/*更高的分辨率*/}}基本上让我们能够对图像进行艺术指导。并且，按照这个想法，我们可以利用object-fit属性等CSS特性，当与object-position一起使用时，我们可以裁剪图像以获得更好的焦点，同时保持图像的纵横比。所以，要改变图像的焦点：@mediaonlyscreenand(min-resolution:192dpi){body{background-image:picture-lg.png;适合对象：覆盖；物体位置：100%150%；/*将焦点移向右中*/}}在CSS中设置最小值和最大值min()函数指定元素可以收缩到的绝对最小尺寸。此功能对于帮助文本大小在不同屏幕尺寸之间正确缩放非常有用，例如永远不要让流体类型低于清晰的字体大小：html{font-size:min(1rem,22px);/*保持在16px和22px之间*/}min()接受两个值，可以是相对值，百分比或固定单位。在此示例中，我们告诉浏览器永远不要让具有.box类的元素的宽度低于45%或600px，以最小的视口宽度为准。.box{width:min(45%,600px)}如果计算出45%小于600px，浏览器将使用45%作为宽度。反之，如果45%的计算值大于600px，则元素的宽度将使用600px。max()函数也是如此，它也接受两个值，但它没有指定元素的最小大小，而是定义了它的最大大小。.box{width:max(60%,600px)}如果60%计算出来的值大于600px，浏览器会使用60%作为宽度。相反，如果计算值的60%小于600px，则将使用600px作为元素的宽度。ClampingValues一段时间以来，我们中的许多人一直在叫嚣clip()，我们实际上在所有现代浏览器（抱歉，IE）中都有广泛的支持。clamp()是min()和max()函数的组合，接受三个参数：最小首选值和最大值例如：.box{font-size:clamp(1rem,40px,4rem)}浏览器将字体设置为1rem，直到1rem的计算值大于40px。而当计算值大于40px时呢？是的，浏览器将在达到4rem后停止增加大小。您可以看到如何在不使用媒体查询的情况下使用clip()使元素流畅。使用响应式单元您是否曾经构建过带有大标题或小标题的页面，并羡慕它在桌面屏幕上的显示效果，但在移动设备上检查时却发现它太大了？我肯定遇到过这样的情况，在本节中我将解释如何处理它们。在CSS中，您可以使用各种度量单位来确定元素的大小或长度，最常用的度量单位包括：px、em、rem、%、vw和vh。虽然，有一些不太常用的单位。我们感兴趣的是px可以被认为是一个绝对单位，而其余的被认为是相对单位。绝对单位像素(px)被认为是绝对单位，主要是因为像素是固定的，不会因任何其他元素的测量而改变。将其视为其他相关单位使用的基本或根单位。尝试将像素用于响应行为可能会遇到问题，因为它是固定的，但如果您有根本不应该调整大小的元素，它们就很好。相对单位相对单位，例如%、em和rem，更适合响应式设计，主要是因为它们能够在不同的屏幕尺寸之间缩放。vw：相对于视口的宽度vh：相对于视口的高度rem：相对于根（）元素（默认字体大小通常为16px）em：相对于父元素%：相对于父元素same,big默认字体大小对于大多数浏览器来说是16px，rem单位使用它来生成计算值。因此，如果用户在浏览器上调整字体大小，页面上的所有内容都会根据根大小正确缩放。例如，当处理16px的根时，您指定的数字将乘以该数字乘以默认大小。例如：.8rem=12.8px(.8*16)1rem=16px(1*16)2rem=32px(2*16)如果您或用户更改默认大小怎么办？我们已经说过这些是相对单位，最终尺寸值将基于新的基本尺寸。这在媒体查询中很有用，您只需更改字体大小，整个页面就会相应地放大或缩小。例如，如果您在CSS中将font-size更改为10px，则计算出的大小将变为.html{字体大小：10px;}1rem=10px(1*10)2rem=20px(2*10)。5rem=5px(.5*10)注意：这也适用于百分比%。例如：100%=16px；200%=32px；50%=8px；rem和em单位有什么区别？rem使用根元素()的字体大小来计算值，而声明em值的元素是指包含它的父元素的字体大小。如果指定的父元素和根元素具有不同的大小（例如，父元素为18px，但根元素为16px），则em和rem将解析为不同的计算值。这使我们能够更精细地控制元素在不同响应环境中的响应方式。vh是viewportheight的首字母缩写，也就是可见屏幕的高度，100vh代表100%的视口高度（视设备而定）。同样，vw代表viewportwidth，意思是设备可见的屏幕宽度，100vw字面意思是100%的viewport宽度。超越媒体查询？我们刚刚了解了一些非常强大且相对较新的HTML和CSS功能，这些功能为我们提供了额外（并且可能更有效）的方法来构建响应能力。这并不是说这些新技术会取代我们一直在做的事情。它们只是我们开发人员工具带中的更多工具，使我们能够更好地控制元素在不同上下文中的行为方式。无论是处理字体大小、分辨率、宽度、焦点，还是任何其他方面，我们对用户体验的控制比以往任何时候都更加精细。因此，下次当您发现自己正在从事一个项目时，您希望更好地控制特定设备上设计的确切外观和感觉，看看原生HTML和CSS如何提供帮助-事情已经发展到了令人难以置信的地步。关注这位掉头发、摆地摊、卖货、持续学习的程序员，第一时间阅读最新文章，过两天会优先发布新文章。留心的话，还能领取大礼包，绝对让你省下不少钱！