CSS中的媒體查詢可以通過基於設(shè)備特性應(yīng)用樣式來響應(yīng)式設(shè)計(jì)。 1。從移動(dòng)優(yōu)先的方法開始，為小屏幕編寫基本樣式，並為大型設(shè)備增強(qiáng)它們。 2。邏輯上使用常見斷點(diǎn)（例如，移動(dòng)：最多767px，平板電腦：768px – 991px，桌面：992px），僅在佈局中斷時(shí)添加查詢。 3。在需要時(shí)處理方向和分辨率發(fā)生變化，例如調(diào)整景觀模式或視網(wǎng)膜顯示器。 4。避免陷阱，例如分散的媒體查詢，過度使用最大寬度以及缺少視口元標(biāo)記。通過斷點(diǎn)對查詢進(jìn)行分組可提高可維護(hù)性和清晰度。

在構(gòu)建響應(yīng)式網(wǎng)站時(shí)，媒體查詢是CSS中最重要的工具之一。它們讓您根據(jù)設(shè)備的特性應(yīng)用樣式 - 主要是屏幕寬度，以及方向或分辨率之類的東西。正確使用的是，它們有助於創(chuàng)建在手機(jī)，平板電腦和臺(tái)式機(jī)上平穩(wěn)適應(yīng)的佈局。

從移動(dòng)優(yōu)先的方法開始

移動(dòng)優(yōu)先意味著為較小的屏幕編寫基本CSS，然後使用媒體查詢來增強(qiáng)較大設(shè)備的佈局。這可以使您的代碼精簡，並確保在移動(dòng)設(shè)備上的性能更好。

這是通常的工作方式：

• 編寫在電話上效果很好的默認(rèn)樣式。
• 添加隨著屏幕越來越寬的媒體查詢。
• 僅在需要時(shí)加載較重的資產(chǎn)（例如背景圖像）。

例如：

 / *手機(jī)的基本樣式 */
。容器 {
  填充：10px;
}

/ *調(diào)整平板電腦的佈局，然後向上 */
@Media（最小寬度：768px）{
  。容器 {
    填充：20px;
    最大寬度：800px;
    保證金：0自動(dòng)；
  }
}

這樣，移動(dòng)用戶就不必下載或處理用於更大屏幕的不必要樣式。

明智地使用普通斷點(diǎn)

沒有官方的斷點(diǎn)列表，但是有一些廣泛使用的尺寸可以匹配常見的設(shè)備寬度。關(guān)鍵不是針對特定設(shè)備，而是要找到佈局開始斷裂和相應(yīng)調(diào)整的邏輯點(diǎn)。

常見斷點(diǎn)範(fàn)圍：

• 手機(jī)：高達(dá)767px
• 平板電腦肖像：768px - 991px
• 桌面：992px及向上

避免為每一個(gè)小更改編寫太多媒體查詢。取而代之的是，在調(diào)整瀏覽器大小時(shí)測試佈局，並且僅在需要修復(fù)的東西時(shí)添加查詢。

另外，在每個(gè)媒體查詢中將相關(guān)樣式保持在一起，以使您的代碼更易於維護(hù)。

處理方向和分辨率變化

儘管基於寬度的媒體查詢是最常見的，但有時(shí)您需要檢查其他功能，例如屏幕方向或像素密度。

例如，如果您想專門調(diào)整針對景觀模式的樣式：

 @Media（方向：景觀）{
  .Hero {
    身高：30VH；
  }
}

或?yàn)橐暰W(wǎng)膜顯示高分辨率圖像：

 @Media（最小分辨率：2DPPX）{
  。標(biāo)識(shí) {
    背景圖像：url（'logo@2x.png'）;
  }
}

這些並不總是必要的，但是在某些情況下，它們對於微調(diào)體驗(yàn)很有用。

避免常見的陷阱

當(dāng)人們第一次開始使用媒體查詢時(shí)，往往會(huì)出現(xiàn)一些錯(cuò)誤：

• 在整個(gè)地方放置媒體查詢，而不是通過斷點(diǎn)進(jìn)行分組
• 僅使用max-width ，最終被凌亂覆蓋
• 忘記在html中設(shè)置視口元標(biāo)記（ <meta name="viewport" content="width=device-width, initial-scale=1"> ）
• 不測試實(shí)際調(diào)整大小的場景

一個(gè)提示：考慮將所有媒體查詢放在樣式表的底部，由斷點(diǎn)分組，尤其是在啟動(dòng)時(shí)。它更容易查看哪些樣式適用於哪裡。

基本上，媒體查詢使您可以控制您的網(wǎng)站在不同設(shè)備上的外觀而無需JavaScript。使它們簡單，合乎邏輯，並專注於實(shí)際佈局需求。

以上是有效利用CSS媒體查詢來響應(yīng)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！