CSS媒體查詢指南

CSS媒體查詢是一種根據特定特性、功能和用戶偏好來定位瀏覽器的技術，然後根據這些特性應用樣式或運行其他代碼。或許世界上最常見的媒體查詢是那些針對特定視口範圍並應用自定義樣式的查詢，它催生了響應式設計的整個理念。

 /* 當瀏覽器寬度至少為600px及以上時*/
@media screen and (min-width: 600px) {
  .element {
    /* 應用一些樣式*/
  }
}

除了視口寬度外，我們還可以定位許多其他方面。這可能是屏幕分辨率、設備方向、操作系統偏好，甚至是我們可以查詢和用於設置內容樣式的一系列其他因素。

想要快速查看基於標准設備（如手機、平板電腦和筆記本電腦）視口的媒體查詢列表？請查看我們的代碼片段集。

使用媒體查詢

媒體查詢通常與CSS相關聯，但也可以在HTML和JavaScript中使用。

HTML

我們可以通過幾種方法直接在HTML中使用媒體查詢。

<link>元素可以直接放在文檔中。在這個例子中，我們告訴瀏覽器我們想要在不同的視口大小下使用不同的樣式表：

<link href="all.css" media="all" rel="stylesheet">
<link href="small.css" media="(min-width: 20em)" rel="stylesheet">
<link href="medium.css" media="(min-width: 64em)" rel="stylesheet">
<link href="large.css" media="(min-width: 90em)" rel="stylesheet">
<link href="extra-large.css" media="(min-width: 120em)" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

為什麼要這樣做？這是一種很好的方法，可以通過將樣式分割開來，以適合需要它們的設備下載和提供服務的方式來微調網站的性能。

但需要明確的是，這並不總是能阻止與這些媒體查詢不匹配的樣式表下載，它只是為它們分配了一個較低的加載優先級。

因此，如果像手機這樣的小型屏幕設備訪問該網站，它只會下載與它的視口大小匹配的媒體查詢中的樣式表。但是，如果較大的台式機屏幕出現，它將下載所有樣式表，因為它與所有這些查詢匹配（在這個特定示例中，減去打印查詢）。

這只是<link>元素。正如我們的響應式圖像指南所解釋的那樣，我們可以在元素上使用媒體查詢，這會告知元素瀏覽器應該從一組圖像選項中使用哪個版本的圖像。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174353857438221.png" class="lazy" alt="CSS Media Queries Guide">

同樣，這可以很好地提高性能，因為我們可以為較小的設備提供較小的圖像——這大概（但並非總是）是可能受數據計劃限制的低功耗設備。

並且我們不要忘記，我們也可以直接在<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="CSS媒體查詢指南" >元素上使用媒體查詢：

<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="A calico cat with dark aviator sunglasses." srcset="cat-small.png 300w, cat-medium.png 600w, cat-large.png 1200w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px">

CSS

同樣，CSS 是在實際應用中發現媒體查詢最常見的地方。它們直接位於樣式表中的@media規則中，該規則使用瀏覽器匹配這些條件時的條件來包裝元素，以確定何時何地應用一組樣式。

 /* 寬度在320px 到480px 之間的視口*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .card {
    background: #bada55;
  }
}

也可以對導入的樣式表進行範圍限定，但作為一般規則，應避免使用@import ，因為它性能較差。

 /* 盡可能避免使用@import！ */

/* 所有屏幕的基本樣式*/
@import url("style.css") screen;
/* 縱向（窄）方向屏幕的樣式*/
@import url('landscape.css') screen and (orientation: portrait);
/* 打印樣式*/
@import url("print.css") print;

JavaScript

我們也可以在JavaScript 中使用媒體查詢！你猜怎麼著？它們的工作方式與在CSS 中非常相似。區別在於？我們首先使用window.matchMedia()方法來定義條件。

因此，假設我們希望在瀏覽器寬度至少為768px 時將消息記錄到控制台。我們可以創建一個調用matchMedia()並定義該屏幕寬度的常量：

 // 創建一個媒體條件，該條件針對寬度至少為768px 的視口const mediaQuery = window.matchMedia('(min-width: 768px)');

然後，當滿足該條件時，我們可以觸發記錄到控制台：

 // 創建一個媒體條件，該條件針對寬度至少為768px 的視口const mediaQuery = window.matchMedia('(min-width: 768px)');

// 注意`matches` 屬性if (mediaQuery.matches) {
  console.log('媒體查詢匹配！');
}

不幸的是，這只會觸發一次，因此如果關閉警報，如果我們更改屏幕寬度並再次嘗試而無需刷新，它將不會再次觸發。這就是為什麼最好使用監聽器來檢查更新的原因。

 // 創建一個條件，該條件針對寬度至少為768px 的視口const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  // 檢查媒體查詢是否為真if (e.matches) {
    // 然後將以下消息記錄到控制台console.log('媒體查詢匹配！');
  }
}

// 註冊事件監聽器mediaQuery.addListener(handleTabletChange);

// 初始檢查handleTabletChange(mediaQuery);

請查看Marko Ilic 關於“使用JavaScript 媒體查詢”的完整文章，以更深入地了解這一點，包括使用媒體查詢與較舊的JavaScript 方法（綁定resize事件監聽器，檢查window.innerWidth或window.innerHeight以觸發更改）的比較。

### 媒體查詢的結構

既然我們已經看到了媒體查詢可以在哪裡使用的幾個示例，那麼讓我們將它們分解並了解它們實際上在做什麼。

@media

 @media [media-type] ([media-feature]) {
  /* 樣式！ */
}

媒體查詢配方中的第一個成分是@media規則本身，它是許多CSS at-rules 之一。為什麼@media會受到如此關注？因為它針對網站查看所用的媒體的類型、該媒體類型支持的功能以及可以組合以混合和匹配簡單和復雜條件的運算符。

媒體類型

@media screen {
  /* 樣式！ */
}

我們試圖定位什麼類型的媒體？在許多（如果不是大多數）情況下，您會在這裡看到一個screen值，這是有道理的，因為我們試圖匹配的許多媒體類型都是帶有屏幕連接的設備。

但是屏幕當然不是我們唯一可以定位的媒體類型。我們有一些，包括：

• all ：匹配所有設備
• print ：匹配在打印預覽中查看的文檔或任何將內容分解成旨在打印的頁面的媒體。
• screen ：匹配帶有屏幕的設備
• speech ：匹配以聲音方式讀取內容的設備，例如屏幕閱讀器。自媒體查詢級別4 以來，這取代了現已棄用的aural類型。

要在屏幕上預覽打印樣式，所有主要瀏覽器都可以使用DevTools 模擬打印樣式表的輸出。其他媒體類型（如tty 、 tv 、 projection 、 handheld 、 braille 、 embossed和aural ）已被棄用，雖然規范繼續建議瀏覽器識別它們，但它們必須評估為空。如果您正在使用其中一種，請考慮將其更改為現代方法。

媒體特性

一旦我們定義了要匹配的媒體類型，我們就可以開始定義要匹配它的特性了。我們已經查看了許多將屏幕與寬度匹配的示例，其中screen是類型，而min-width和max-width是具有特定值的特性。

但是我們可以匹配的“特性”還有很多很多（很多）！媒體查詢級別5 將媒體特性分為6 類。

視口/頁面特性

顯示質量

顏色

交互

視頻前綴

規範引用了包括電視在內的用戶代理，它們在兩個各自具有自身特性的平面上呈現視頻和圖形。以下特性描述了這些平面。

腳本

用戶偏好

已棄用

運算符

媒體查詢支持許多編程語言中的邏輯運算符，以便我們可以根據某些條件來匹配媒體類型。 @media規則本身就是一個邏輯運算符，它基本上聲明“如果”以下類型和特性匹配，則執行某些操作。

and

但是，如果我們想要定位一定寬度範圍內的屏幕，可以使用and運算符：

 /* 匹配寬度在320px 和768px 之間的屏幕*/
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* 樣式！ */
  }
}

or（或逗號分隔）

我們也可以用逗號分隔特性作為使用or運算符來匹配不同的特性：

 /*
  匹配用戶偏好暗模式或屏幕寬度至少為1200px 的屏幕*/
@media screen (prefers-color-scheme: dark), (min-width: 1200px) {
  .element {
    /* 樣式！ */
  }
}

not

也許我們想通過設備不支持或不匹配的內容來定位設備。此聲明在設備是打印機且只能顯示一種顏色時會移除正文的背景顏色。

 @media print and (not(color)) {
  body {
    background-color: none;
  }
}

想要更深入地了解？請查看DigitalOcean 社區的“CSS 媒體查詢：快速參考和指南”，以獲取更多遵循媒體查詢語法的示例。

你真的需要CSS 媒體查詢嗎？

媒體查詢是CSS 工具箱中功能強大的工具，具有令人興奮的隱藏寶石。但是，如果您適應每種情況的設計，最終會得到一個維護起來過於復雜的代碼庫，而且，眾所周知，CSS 就像一隻熊崽：可愛且無害，但當它長大時會吃掉你。

這就是為什麼我建議遵循Ranald Mace 的通用設計理念，即“設計產品以盡可能被所有人使用，而無需進行適應或專門設計。 ”

在“人人皆可訪問”中，Laura Kalbag 解釋說，無障礙設計和通用設計之間的差異很細微但很重要。無障礙設計師會為輪椅使用者創建一個大尺寸的門以便進入，而通用設計師會創建一個任何人都可以適應的入口，而不管他們的能力如何。

我知道在網絡上談論通用設計很難，而且聽起來幾乎是烏托邦式的，但想想看，大約有150 種不同的瀏覽器，大約50 種不同的用戶偏好組合，正如我們之前提到的，僅Android 設備就有超過24000 種不同且獨特的設備。

這意味著至少有1800 萬種可能的情況可能會顯示您的內容。用精彩的Miriam Suzanne 的話來說， “ CSS 在這裡試圖在一個無限且未知的畫布上，跨越操作系統、界面和語言來進行未知內容的圖形設計。我們沒有人可能知道我們在做什麼。 ”

這就是為什麼假設非常危險的原因，因此當您設計、開發和考慮您的產品時，請拋開假設，並使用媒體查詢來確保您的內容在任何联係人和任何用戶面前都能正確顯示。

匹配值範圍

上一節中概述的許多媒體特性（包括width 、 height 、 color和color-index ）都可以加上min-或max-前綴來表示最小或最大約束。我們已經在許多示例中看到了這些用法，但關鍵是我們可以創建一個值範圍來匹配，而不必聲明特定值。

在下面的代碼片段中，當視口寬度大於30em 且小於80em 時，我們將正文的背景顏色設置為紫色。如果視口寬度與該值範圍不匹配，則將回退到白色。

 body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

媒體查詢級別4 指定了一種使用less than(和<code>equals(=)運算符的新簡化語法。因此，最後一個示例可以轉換為新的語法，如下所示：

 @media (width >= 30em) and (width <p></p><h3 id="嵌套和復雜的決策">嵌套和復雜的決策</h3><p></p><p>CSS 允許您嵌套at-rules 或使用括號分組語句，使我們能夠深入評估複雜操作。</p><pre class="brush:php;toolbar:false"> @media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and (not (color)) { ... }
}

小心！即使可以創建強大而復雜的表達式，您最終也可能會得到一個非常武斷、難以維護的查詢。正如Brad Frost 所說：“我們的界面越複雜，我們就必須付出更多思考才能正確維護它們。”

輔助功能

媒體查詢級別4 中添加的許多功能都集中在輔助功能上。

prefers-reduced-motion

prefers prefers-reduced-motion以最大限度地減少移動和動畫的數量。它採用兩個值：

 <code>- no-preference：指示用户没有向系统告知任何偏好。 - reduce：指示用户已通知系统他们更喜欢最大限度地减少移动或动画数量的界面，最好是消除所有非必要的移动。此偏好通常由患有前庭障碍或眩晕症的人使用，其中不同的运动会导致失去平衡、偏头痛、恶心或听力损失。如果您曾经尝试快速旋转并感到头晕，您就会知道感觉如何。在Eric Bailey 的一篇精彩文章中，他建议使用以下代码停止所有动画： ```css @media screen and (prefers-reduced-motion: reduce) { * { /* 非常短的持续时间意味着依赖事件的JavaScript 仍然有效*/ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }</code>

流行的框架（如Bootstrap）默認情況下具有此功能。在我看來，沒有理由不使用prefers-reduced-motion ——只需使用它即可。

prefers-contrast

prefers-contrast特性告知用戶是否已選擇在其係統偏好設置或瀏覽器設置中增加或減少對比度。它採用三個值：

• no-preference：當用戶沒有向系統告知任何偏好時。如果您將其用作布爾值，它將評估為false 。
• high：當用戶選擇顯示更高對比度級別時。
• low：當用戶選擇顯示較低對比度級別時。

在撰寫本文時，此功能不受任何瀏覽器支持。 Microsoft 使用非標準的早期實現與-ms-high-contrast特性一起工作，該特性僅適用於Microsoft Edge v18 或更早版本（但不包括基於Chromium 的版本）。

 .button {
  background-color: #0958d8;
  color: #fff;
}

@media (prefers-contrast: high) {
  .button {
    background-color: #0a0db7;
  }
}

此示例在用戶打開高對比度時，將類button的對比度從AA 提高到AAA。

inverted-colors

inverted-colors特性告知用戶是否已選擇在其係統偏好設置或瀏覽器設置中反轉顏色。有時此選項用作高對比度的替代方案。它採用兩個值：

• none：顏色正常顯示時
• inverted：當用戶選擇反轉顏色選項時

反轉顏色的問題在於它還會反轉圖像和視頻的顏色，使它們看起來像X 光圖像。通過使用CSS invert過濾器，您可以選擇所有圖像和視頻並將它們反轉回來。

 @media (inverted-colors) {
  img, video { 
    filter: invert(100%);
  }
}

在撰寫本文時，此功能僅受Safari 支持。

prefers-color-scheme

如今，我們越來越多地看到“暗模式”配色方案，並且由於prefers-color-scheme特性，我們可以利用用戶的系統或瀏覽器偏好設置來確定我們是否應根據其偏好提供“暗”或“亮”主題。

它採用兩個值：

• light：當用戶選擇他們更喜歡淺色主題或沒有活動偏好時
• dark：當用戶在其設置中選擇了深色顯示時

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: white;
  }
}

正如Adhuham 在關於暗模式的完整指南中所解釋的那樣，它不僅僅是更改背景顏色。在開始使用暗模式之前，請記住，如果您沒有非常智能的實現策略，最終可能會得到一個非常難以維護的代碼庫。 CSS 變量可以對此產生奇蹟，但這將是另一篇文章的主題。

未來展望

媒體查詢級別5 目前處於工作草案狀態，這意味著從現在到它成為建議之間可能會發生很多變化。但它包含一些值得一提的有趣功能，因為它們開闢了新的方法來定位屏幕並將設計適應非常具體的條件。

用戶偏好媒體特性

嘿，我們剛剛在上節中介紹了這些！好吧。這些特性令人興奮，因為它們是由用戶的實際設置告知的，無論它們來自用戶代理還是操作系統級別。

檢測強制顏色調色板

這很簡潔。某些瀏覽器會限制可用於呈現樣式的可用顏色數量。這稱為“強制顏色模式”，如果在瀏覽器設置中啟用，用戶可以選擇在頁面上使用有限的顏色集。因此，用戶能夠定義顏色組合和對比度，從而使內容更易於閱讀。

forced-colors特性允許我們使用active值檢測是否正在使用強制顏色調色板。如果匹配，瀏覽器必須通過CSS 系統顏色提供所需的調色板。瀏覽器還可以自行決定頁面的背景顏色是淺色還是深色，如果合適，則觸發相應的prefers-color-scheme值，以便我們可以調整頁面。

檢測最大亮度、顏色深度和對比度比

某些設備（和瀏覽器）能夠顯示超亮顯示屏、呈現廣泛的顏色範圍以及顏色之間的高對比度比。我們可以使用dynamic-range特性檢測這些設備，其中high關鍵字匹配這些設備，而standard匹配所有其他設備。

我們可能會看到對此的更改，因為截至目前，對於構成高亮度和對比度的測量值仍然存在不確定性。瀏覽器可能會做出該決定。

視頻前綴特性

規範討論了一些屏幕（如電視），它們能夠在單獨的“平面”上顯示視頻和圖形，這可能是區分視頻幀與屏幕上其他元素的一種方式。因此，媒體查詢級別5 提出了一組新的媒體特性，旨在檢測視頻特性，包括色域和動態範圍。

還有關於檢測視頻高度、寬度和分辨率的建議，但陪審團仍在討論這些是否是解決視頻的正確方法。

瀏覽器支持

瀏覽器不斷發展，因為當您閱讀這篇文章時，此功能的瀏覽器支持可能會發生變化，請檢查MDN 更新的瀏覽器兼容性表。

關於容器查詢的說明

如果組件可以根據自身大小而不是瀏覽器的自身大小進行調整，那不是很酷嗎？這就是CSS 容器查詢的概念。我們目前只有瀏覽器屏幕才能通過媒體查詢進行這些更改。

這很不幸，因為視口並不總是與元素本身的大小直接相關。想像一下一個在網站上許多不同上下文中呈現的小部件：有時在側邊欄中，有時在全寬度頁腳中，有時在具有未知列的網格中。

這就是容器查詢試圖解決的問題。理想情況下，我們可以根據元素本身的大小而不是視口的大小來調整元素的樣式。 Chrome 105 發布了對CSS 容器查詢的支持。 Safari 16.1 也一樣。在撰寫本文時，我們真正等待的是Firefox 獲得廣泛支持。

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面

移動/平板電腦

### 示例

讓我們來看一些媒體查詢示例。媒體類型、特性和運算符的組合如此之多，我們可以顯示的可能性數量將是詳盡無遺的。相反，我們將根據特定的媒體特性重點介紹一些。

在不同的視口寬度下調整佈局

更多信息

這可能是最廣泛使用的媒體特性。它告知瀏覽器視口的寬度，包括滾動條。它解鎖了Ethan Marcotte 著名的響應式設計的CSS 實現：一種通過結合流體網格、靈活圖像和響應式排版來響應視口大小的設計過程。

後來，Luke Wroblewski 通過引入移動優先一詞來發展響應式設計的概念，鼓勵設計師和開發人員首先從小型屏幕體驗開始，然後隨著屏幕寬度和設備功能的擴展逐步增強體驗。

移動優先通常可以通過使用min-width而不是max-width來發現。如果我們從min-width開始，我們基本上是在說，“嘿，瀏覽器，從這裡開始向上工作。”另一方面， max-width就像優先考慮更大的屏幕一樣。

一種通過寬度定義斷點的方法是使用標准設備的尺寸，例如iPhone 的精確像素寬度。但是，有很多很多（很多）不同的手機、平板電腦、筆記本電腦和台式機。僅查看Android，截至2015 年8 月，就有超過24,000 種視口大小、分辨率、操作系統和瀏覽器的變體。

因此，雖然針對特定設備的精確寬度可能對故障排除或一次性修復有所幫助，但這可能不是維護響應式架構的最可靠解決方案。這絕不是一個新想法。 Brad Frost 早在2013 年發表的帖子“高效媒體查詢的7 個習慣”中就已經在宣揚讓內容（而不是設備）決定斷點的優點。

即使媒體查詢仍然是創建響應式界面的有效工具，但在許多情況下，完全可以避免使用寬度。現代CSS 允許我們使用CSS 網格和flex 創建靈活的佈局，這些佈局會將我們的內容適應視口大小，而無需添加斷點。例如，這是一個網格佈局，它會調整它將有多少列，而無需任何媒體查詢。

 .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

關於超越寬度的思考有很多文章，幾年前我寫過這篇文章，我建議查看Una Kravet 的一篇名為“一行CSS 中的十種現代佈局”的文章。

#### 暗模式

更多信息

此示例直接摘自我們關於網絡上暗模式的指南。其思想是，我們可以使用prefers-color-scheme特性檢測用戶的系統設置是否配置為淺色或深色模式，然後為呈現的UI 定義一組替代顏色。

將此技術與CSS 自定義屬性相結合會使事情變得更容易，因為它們就像我們只需要定義一次，然後在整個代碼中使用的變量。需要交換顏色嗎？更改自定義屬性值，它會在任何地方更新。這正是prefers-color-scheme所做的。我們將一組顏色定義為自定義屬性，然後在媒體查詢中使用prefer-color-scheme特性重新定義它們，以根據用戶的設置更改顏色。

#### 在響應式卡片庫上檢測方向、懸停和運動

更多信息

此圖庫是響應式的，無需使用寬度特性。

它檢測視口的方向。如果它是縱向視口，側邊欄將變為標題；如果是橫向，它將保留在側面。

使用pointer媒體特性，它決定主要輸入設備是粗糙的（如手指）還是精細的（如鼠標光標）來設置複選框的可點擊區域的大小。

然後，通過使用hover媒體特性，該示例檢查設備是否能夠懸停（如鼠標光標）並在每張卡片中顯示複選框。

當prefers-reduced-motion設置為reduce時，動畫將被移除。

您是否注意到某些內容？我們實際上沒有為卡片的實際佈局和大小使用媒體查詢！這是使用.container元素上的minmax()函數處理的，以顯示響應式設計並不總是意味著使用媒體查詢。

簡而言之，這是一個完全響應式的應用程序，無需測量寬度或做出任何假設。

#### 定位橫向模式下的iPhone

 /* iPhone X 橫向模式*/
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  /* 樣式！ */
}

更多信息

orientation媒體特性測試設備是向寬方向（橫向）旋轉還是向高方向（縱向）旋轉。

雖然媒體查詢無法準確知道正在使用哪個設備，但我們可以使用特定設備的精確尺寸。上面的代碼片段針對的是iPhone X。

#### 為大型視口應用粘性標題

更多信息

在上面的示例中，我們使用height來分離固定元素並避免在屏幕太短時佔用過多的屏幕空間。當屏幕很高時，水平導航欄處於固定位置，但在較短的屏幕上會分離自身。

與width特性一樣， height檢測視口的高度，包括滾動條。我們許多人在具有狹窄視口的小型設備上瀏覽網頁，這使得為不同的高度設計比以往任何時候都更重要。 Anthony Colangelo 描述了Apple 如何以有意義的方式使用height媒體特性來處理視口高度變化時英雄圖像的大小。

#### 響應式（流體）排版

更多信息

字體看起來可能太大或太小，具體取決於顯示它的屏幕大小。如果我們在小型屏幕上工作，那麼我們很可能想要使用比在更大的屏幕上使用的字體更小的字體。

這裡的想法是，我們使用瀏覽器的寬度來縮放字體大小。我們在上設置一個默認字體大小，作為“小”字體大小，然後使用媒體查詢設置另一個字體大小，作為“大”字體大小。在中間？我們再次設置字體大小，但在另一個媒體查詢中，該查詢根據瀏覽器寬度計算大小。

這樣做的妙處在於它允許字體大小根據瀏覽器寬度調整，但永遠不會超過或低於特定大小。但是，由於像min() 、 max()和clamp()這樣的較新的CSS 功能，有一種更簡單的方法可以做到這一點，而無需任何媒體查詢。

#### 當設備具有粗指針時提供更大的觸摸目標

更多信息

您是否曾經訪問過一個具有超小按鈕的網站？我們有些人手指粗壯，很難準確地點擊一個對象而不會無意中點擊其他東西。

當然，我們可以依靠width特性來判斷我們是否正在處理小型屏幕，但我們也可以檢測設備是否能夠懸停在元素上。如果不是，那麼它可能是一個觸摸設備，或者可能是同時支持兩種設備的設備，例如Microsoft Surface。

上面的演示使用複選框作為示例。在小型屏幕上查看複選框時，複選框可能很難點擊，因此如果設備無法進行懸停事件，我們將增加大小並且不需要懸停。

同樣，這種方法並不總是準確的。請查看Patrick Lauke 的詳盡文章，其中詳細介紹了使用hover 、 pointer 、 any-hover和any-pointer時可能出現的問題。

### 規範

• 媒體查詢級別4（候選推薦）
• 媒體查詢級別5（工作草案）

特別感謝Sarah Rambacher 幫助審查本指南。

以上是CSS媒體查詢指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！