響應(yīng)式的Web設(shè)計(jì)超出了媒體查詢和現(xiàn)代CSS布局，例如Flexbox和Grid。本文探討了經(jīng)常被忽視的HTML和CSS技術(shù)，以創(chuàng)建真正響應(yīng)迅速的網(wǎng)站，從而最大程度地減少對媒體查詢的依賴，從而更自然，更有效。

與這些高級功能結(jié)合使用時(shí)，媒體查詢將成為補(bǔ)充。讓我們探索如何。

真正響應(yīng)迅速的圖像：超越width: 100%

盡管width: 100%簡化了圖像調(diào)整大小，但它具有缺點(diǎn)：圖像失真和不必要的較小設(shè)備上的大量下載。優(yōu)化圖像分辨率和大小對于性能至關(guān)重要。高分辨率的圖像應(yīng)用于較大的屏幕，以及較小的屏幕版本。

這<picture></picture>元素根據(jù)媒體查詢提供精確的圖像資源選擇。我們沒有縮放單個(gè)大圖像，而是為不同方案指定了多個(gè)圖像版本。

<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功能進(jìn)行響應(yīng)設(shè)計(jì)">
</source></source></source></picture>

此示例使用picture-sm.png作為后備。媒體查詢針對特定的視口寬度，選擇適當(dāng)?shù)膱D像。我們還可以將圖像密度（1x，2x，3x）結(jié)合到srcset屬性中以進(jìn)行進(jìn)一步優(yōu)化。

這<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png" class="lazy" alt="超越媒體查詢：使用較新的HTML＆CSS功能進(jìn)行響應(yīng)設(shè)計(jì)"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS媒體查詢可以針對屏幕分辨率（DPI），而不僅僅是視口大小：

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

這允許將高質(zhì)量的圖像提供到高分辨率屏幕。但是，僅依靠分辨率可能會為小屏幕提供大圖像，因此建議與視口尺寸檢查結(jié)合使用。

例子：

身體 {
  背景圖像：URL（picture-md.png）; / *默認(rèn)圖像 */
}

@Media僅屏幕和（最小分辨率：192DPI）{
  身體 {
    背景圖像：URL（picture-lg.png）; / *高分辨率圖像 */
    對象擬合：封面；
    對象位置：100％150％； / *調(diào)整焦點(diǎn) */
  }
}

object-fit和object-position屬性可對圖像裁剪和焦點(diǎn)進(jìn)行細(xì)粒度的控制。

CSS函數(shù)： min() ， max()和clamp()

• min() ：設(shè)置元素的最小尺寸。有助于防止文本變得難以辨認(rèn)：

   html {
    字體大?。簃in（1REM，22px）; / * 16px和22px之間的字體尺寸 */
  }

• max() ：設(shè)置元素的最大大?。?/p>

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

• clamp() ：結(jié)合min()和max() ，提供最小，首選和最大值：

   。盒子 {
    字體大?。簥A具（1REM，40px，4REM）; / *范圍內(nèi)的字體尺寸 */
  }

響應(yīng)式單元：超越像素

響應(yīng)式設(shè)計(jì)受益于相對單位：

• vw / vh ：視口寬度 /高度。
• rem ：相對于根部元素的字體大小。
• em ：相對于父元素的字體大小。
• % ：相對于父元素的大小。

rem單元尺度隨瀏覽器字體尺寸的變化而變化，提供一致的縮放。 em單元根據(jù)母元素大小提供更多的顆粒狀控制。 vw和vh直接與視口維度綁定。

超越媒體查詢：一種整體方法

這些HTML和CSS功能可增強(qiáng)對響應(yīng)能力，補(bǔ)充而不是更換媒體查詢的控制。他們在各種設(shè)備和屏幕尺寸上對用戶體驗(yàn)提供了更細(xì)粒度的控制。通過利用這些技術(shù)，開發(fā)人員可以創(chuàng)建更強(qiáng)大，更有效的響應(yīng)式設(shè)計(jì)。

以上是超越媒體查詢：使用較新的HTML＆CSS功能進(jìn)行響應(yīng)設(shè)計(jì)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！