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

除了使用媒体查询和现代CSS布局（如flexbox和网格）来创建响应式网站外，我们还可以做一些被忽视的事情来制作响应式网站。在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应式图像到相对较新的CSS函数，无论我们是否使用媒体查询都可以使用。事实上，与这些功能一起使用时，媒体查询更像是一种补充，而不是一种完整的方法。让我们看看它是如何工作的。真正响应式图像还记得我们何时可以硬编码width:100%在图像上然后我们离开吗？当然，它有效，并且确实使图像更有弹性，但它也有一些缺点，其中最明显的包括：图像可能会扭曲到失去焦点的程度。较小的设备仍会下载完整尺寸的图像。在网络上使用图像时，我们必须确保它们针对分辨率和尺寸进行了优化。原因是为了确保我们为正确的设备提供正确的图像分辨率，这样我们就不会最终为较小的屏幕下载非常大和沉重的图像，这可能会降低网站的性能。简而言之，我们希望确保将较大、高分辨率的图像发送到大屏幕，同时将较小、分辨率较低的变体发送到小屏幕，从而提高性能和用户体验。HTML提供了元素，它允许我们根据添加的媒体查询指定要呈现的确切图像资源。如前所述，我们不是将一张图像（通常是大的、高分辨率的版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定一组图像用于特定情况。在此示例中，picture.png是全尺寸图像.从那里，我们定义图像的下一个最大版本picture-lg.png，直到最小版本picture-sm.png尺寸减小。请注意，我们仍然在这种方法中使用媒体查询，但驱动器是元素本身的行为响应，而不是在CSS中定义断点。已适当添加媒体查询以随图像大小缩放：视口>=1000px将获得picture.png。介于601px和999px之间的视口将获得picture-lg。png。401px到600px之间的视口将得到picture-sm.png。小于400px的任何东西将得到picture-sm.png。有趣的是，我们还可以在URL后按图像密度标记每个图像-1x、2x、3x等。如果我们sc就好了aled不同的图像，以便浏览器可以根据屏幕密度和视口大小的像素来缩放它们，以确定下载哪个版本。但是请注意我们最终定义了多少图像：让我们具体看一下两个标签：和。浏览器将查找第一个具有与当前视口宽度匹配的媒体查询的元素，然后将显示正确的图像（在srcset属性中指定）。元素是的最后一个子元素元素，如果没有原始源标记匹配，则作为后备。我们还可以使用图像密度来处理响应式图像，仅使用元素通过srcset属性：我们可以做的另一件事是在CSS中根据设备本身的屏幕分辨率（通常以每英寸点数或dpi为单位）而不仅仅是设备视口来编写媒体查询。这意味着我们现在使用的不是：@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;/*高分辨率*/}}<图片>给我们的基本上是艺术指导图像的能力。并且，按照这个想法，我们可以利用object-fit属性等CSS特性，当与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)}如果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可以被认为是一个绝对单位，而其余的被认为是相对单位。1.绝对单位像素（px）被认为是绝对单位主要是因为像素是固定的，不会因任何其他元素的测量而改变。将其视为其他相关单位使用的基本或根单位。尝试将像素用于响应行为可能会遇到问题，因为它是固定的，但如果您有根本不应该调整大小的元素，它们就很好。2.相对单位相对单位，例如%、em和rem，更适合响应式设计，主要是因为它们能够在不同的屏幕尺寸之间缩放。vw：相对于视口的宽度vh：相对于视口的高度rem：相对于root()元素（默认字体大小通常为16px）em：相对于父元素%：相对于父元素同样，大多数浏览器rem的默认字体大小为16px，rem单位使用它来生成计算值。因此，如果用户在浏览器上调整字体大小，页面上的所有内容都会根据根大小正确缩放。例如，当处理16px的根时，您指定的数字将乘以该数字乘以默认大小。例如：.8rem=12.8px(.8*16)1rem=16px(1*16)2rem=32px(2*16)如果您或用户更改默认大小怎么办？我们已经说过这些是相对单位，最终尺寸值将基于新的基本尺寸。这在媒体查询中很有用，您只需更改字体大小，整个页面就会相应地放大或缩小。例如，如果您在CSS中将font-size更改为10px，则计算出的大小将变为.html{font-size: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如何提供帮助-事情已经发展到了令人难以置信的地步。