要寫(xiě)出實(shí)用可靠的媒體查詢規(guī)則，需先使用min-resolution或-webkit-min-device-pixel-ratio判斷設(shè)備分辨率，接著通過(guò)背景圖替換或img的srcset加載高清圖片，再優(yōu)化SVG和圖標(biāo)字體的顯示效果，並註意適配主流設(shè)備、測(cè)試驗(yàn)證及性能優(yōu)化。具體步驟如下：1. 使用min-resolution: 2dppx或-webkit-min-device-pixel-ratio: 2檢測(cè)Retina屏幕；2. 通過(guò)媒體查詢切換背景圖為高清版本或使用img的srcset屬性自動(dòng)加載適配圖片；3. 對(duì)SVG建議使用內(nèi)聯(lián)或sprite，圖標(biāo)字體可配合媒體查詢?cè)O(shè)置備用圖像；4. 不過(guò)度細(xì)分設(shè)備，重點(diǎn)適配1x/2x，結(jié)合瀏覽器工具測(cè)試並優(yōu)化圖片體積以提升性能。掌握這些要點(diǎn)即可實(shí)現(xiàn)清晰顯示與良好兼容性。

要讓網(wǎng)頁(yè)在高分辨率（Retina）屏幕上顯示更清晰的圖片和更細(xì)膩的界面，媒體查詢（Media Query）是一個(gè)非常實(shí)用的工具。簡(jiǎn)單來(lái)說(shuō)，你可以通過(guò)CSS 媒體查詢來(lái)判斷用戶的設(shè)備是否具備高像素密度，然後加載更高清的資源或調(diào)整樣式。

下面幾個(gè)方法能幫你寫(xiě)出實(shí)用又可靠的媒體查詢規(guī)則：

1. 使用min-resolution判斷屏幕分辨率

這是最直接的方式，使用min-resolution來(lái)檢測(cè)設(shè)備的像素密度。通常我們用每英寸像素（dpi）或者設(shè)備像素比（dppx）作為單位。

 @media only screen and (min-resolution: 2dppx) {
  /* 高分辨率屏幕下的樣式*/
}

• 常用值：1.5dppx、2dppx 是Retina 屏幕常見(jiàn)的標(biāo)準(zhǔn)。
• 注意點(diǎn)：不同瀏覽器支持略有差異，可以用-webkit-min-device-pixel-ratio做兼容補(bǔ)充：

 @media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* 更全面的支持*/
}

2. 替換高清圖片的技巧

如果你希望在Retina 屏幕上顯示更高清的圖片，可以通過(guò)媒體查詢切換不同的背景圖或img 元素的srcset。

背景圖示例：

 .logo {
  background-image: url('logo.png');
}

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 100px; /* 設(shè)置為實(shí)際顯示尺寸*/
  }
}

<img src="/static/imghw/default1.png" data-src="image.png" class="lazy" alt="如何為高分辨率（視網(wǎng)膜）顯示媒體查詢？" >標(biāo)籤推薦使用srcset ：

 <img src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" srcset="image@2x.png 2x" alt="如何為高分辨率（視網(wǎng)膜）顯示媒體查詢？">

這樣瀏覽器會(huì)根據(jù)設(shè)備自動(dòng)選擇合適的圖片，無(wú)需額外寫(xiě)媒體查詢。

3. 對(duì)圖標(biāo)字體或SVG 的優(yōu)化建議

對(duì)於圖標(biāo)字體或SVG 圖形，在Retina 屏幕下也能保持清晰，但仍需要注意一些細(xì)節(jié)：

• SVG 圖標(biāo)：盡量使用內(nèi)聯(lián)SVG 或sprite，避免縮放時(shí)模糊。
• 圖標(biāo)字體：雖然清晰，但某些系統(tǒng)渲染效果不一致，可以配合媒體查詢?cè)O(shè)置備用圖像。
• 小尺寸文字：有時(shí)在高分辨率下反而看起來(lái)偏細(xì)，適當(dāng)增加字體粗細(xì)或使用抗鋸齒控制（如font-smooth或-webkit-font-smoothing ）可能會(huì)有幫助。

4. 實(shí)際應(yīng)用中的注意事項(xiàng)

• 不要過(guò)度細(xì)分：不是每個(gè)設(shè)備都需要單獨(dú)適配，抓住主流的1x / 2x 就夠用了。
• 測(cè)試是關(guān)鍵：可以在Chrome 開(kāi)發(fā)者工具中模擬不同DPR 的設(shè)備，看看樣式和圖片是否正確加載。
• 性能考量：高清圖片體積更大，記得壓縮優(yōu)化，避免影響頁(yè)面加載速度。

基本上就這些。寫(xiě)一個(gè)好用的媒體查詢並不難，關(guān)鍵是理解設(shè)備像素比的概念，並結(jié)合實(shí)際內(nèi)容做合理適配。

以上是如何為高分辨率（視網(wǎng)膜）顯示媒體查詢？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！