超越媒体查询：使用较新的HTML＆CSS功能进行响应设计

响应式的Web设计超出了媒体查询和现代CSS布局，例如Flexbox和Grid。本文探讨了经常被忽视的HTML和CSS技术，以创建真正响应迅速的网站，从而最大程度地减少对媒体查询的依赖，从而更自然，更有效。

与这些高级功能结合使用时，媒体查询将成为补充。让我们探索如何。

真正响应迅速的图像：超越width: 100%

尽管width: 100%简化了图像调整大小，但它具有缺点：图像失真和不必要的较小设备上的大量下载。优化图像分辨率和大小对于性能至关重要。高分辨率的图像应用于较大的屏幕，以及较小的屏幕版本。

这<picture></picture>元素根据媒体查询提供精确的图像资源选择。我们没有缩放单个大图像，而是为不同方案指定了多个图像版本。

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png" class="lazy" alt="超越媒体查询：使用较新的HTML＆CSS功能进行响应设计">
</source></source></source></picture>

此示例使用picture-sm.png作为后备。媒体查询针对特定的视口宽度，选择适当的图像。我们还可以将图像密度（1x，2x，3x）结合到srcset属性中以进行进一步优化。

这<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png" class="lazy" alt="超越媒体查询：使用较新的HTML＆CSS功能进行响应设计"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS媒体查询可以针对屏幕分辨率（DPI），而不仅仅是视口大小：

 @Media仅屏幕和（最小分辨率：192DPI）{
  / *高分辨率屏幕的样式 */
}

这允许将高质量的图像提供到高分辨率屏幕。但是，仅依靠分辨率可能会为小屏幕提供大图像，因此建议与视口尺寸检查结合使用。

例子：

身体 {
  背景图像：URL（picture-md.png）; / *默认图像 */
}

@Media仅屏幕和（最小分辨率：192DPI）{
  身体 {
    背景图像：URL（picture-lg.png）; / *高分辨率图像 */
    对象拟合：封面；
    对象位置：100％150％； / *调整焦点 */
  }
}

object-fit和object-position属性可对图像裁剪和焦点进行细粒度的控制。

CSS函数： min() ， max()和clamp()

• min() ：设置元素的最小尺寸。有助于防止文本变得难以辨认：

   html {
    字体大小：min（1REM，22px）; / * 16px和22px之间的字体尺寸 */
  }

• max() ：设置元素的最大大小：

   。盒子 {
    宽度：最大（60％，600px）; / *宽度最多为60％或600px */
  }

• clamp() ：结合min()和max() ，提供最小，首选和最大值：

   。盒子 {
    字体大小：夹具（1REM，40px，4REM）; / *范围内的字体尺寸 */
  }

响应式单元：超越像素

响应式设计受益于相对单位：

• vw / vh ：视口宽度 /高度。
• rem ：相对于根部元素的字体大小。
• em ：相对于父元素的字体大小。
• % ：相对于父元素的大小。

rem单元尺度随浏览器字体尺寸的变化而变化，提供一致的缩放。 em单元根据母元素大小提供更多的颗粒状控制。 vw和vh直接与视口维度绑定。

超越媒体查询：一种整体方法

这些HTML和CSS功能可增强对响应能力，补充而不是更换媒体查询的控制。他们在各种设备和屏幕尺寸上对用户体验提供了更细粒度的控制。通过利用这些技术，开发人员可以创建更强大，更有效的响应式设计。

以上是超越媒体查询：使用较新的HTML＆CSS功能进行响应设计的详细内容。更多信息请关注PHP中文网其他相关文章！