超越媒體查詢：使用較新的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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png?x-oss-process=image/resize,p_40" class="lazy" alt="超越媒體查詢：使用較新的HTML＆CSS功能進行響應設計">
</source></source></source></picture>

此示例使用picture-sm.png作為後備。媒體查詢針對特定的視口寬度，選擇適當的圖像。我們還可以將圖像密度（1x，2x，3x）結合到srcset屬性中以進行進一步優化。

這<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png?x-oss-process=image/resize,p_40" 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中文網其他相關文章！