ATOZ CSS：通過媒體查詢創建響應式設計

關鍵要點

• 避免在創建響應式設計時使用特定設備的斷點。相反，設置主要斷點和次要微調點，這些斷點大約是大多數手機、平板電腦和台式/筆記本電腦設備的尺寸。
• 使用 em 或 rem 作為斷點單位，而不是像素，以獲得更好的可伸縮性。如果用戶縮放頁面或增加文本大小，這將有所幫助。
• CSS 媒體查詢是創建響應式設計的強大工具。它們允許您為具有不同屏幕尺寸的不同設備應用不同的樣式。但是，避免使用它們來定位特定設備，因為這會導致維護噩夢。相反，專注於創建適用於所有屏幕尺寸的響應式設計。

本文是 AtoZ CSS 系列的一部分。在此處查看媒體查詢的完整屏幕截圖和成績單。

歡迎來到我們的 AtoZ CSS 系列！在本系列中，我將探索不同的 CSS 值（和屬性），每個值都以字母表的不同字母開頭。我們知道，有時屏幕截圖是不夠的，因此在本文中，我添加了一個關於媒體查詢的新快速提示/課程。

M 代表媒體查詢

我猜想，絕大多數網頁設計師和開發人員如今都熟悉響應式設計的概念。如果不是，請查看媒體查詢屏幕截圖。

由於響應式設計非常流行，因此這是一個學習一些技巧的好地方，這些技巧可以改進我們為多種設備開發網站和應用程序的方式。以下是一些 CSS 提示，可以幫助您。

技巧 1：不要使用特定設備的斷點

希望這不用說，但以防萬一您需要提醒或以前沒有遇到過這種最佳實踐，我認為值得重申一下。

特定設備的斷點很容易在您的代碼中通過如下所示的媒體查詢識別（添加註釋以提高清晰度）：

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

這些斷點已針對 Apple 設備設置，並具有“神奇數字”值，例如 768px 或 1024px。

如果用戶的窗口是 1025px 或 1023px 怎麼辦？

媒體查詢將不會生效，並且該設備尺寸的樣式將不會應用。

有時您可能需要斷點的非常具體的數值（稍後會詳細介紹），但在我看來，看到這些特定設備的斷點是一種代碼異味。

那麼你應該怎麼做呢？

技巧 2：設置主要斷點和次要微調點

在響應式項目上工作時，我傾向於設置任意整數斷點，這些斷點大約是大多數手機、平板電腦和台式/筆記本電腦設備的尺寸。

我傾向於使用以下主要斷點（儘管有時這可能會根據項目而有所更改）：

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

使用這些斷點不會將設計限制為僅在這些點處更改，而是為使用三種主要設備類型提供良好的基礎。

對於基於內容的設計調整（即：當內容開始看起來損壞、不平衡或不太適合時），您可以使用微調點來調整元素並潤色項目的細節。

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

技巧 3：使用 em 或 rem 作為斷點單位

不要使用 px，而是使用這些相對單位之一，以便如果用戶縮放頁面或增加文本大小，可以獲得更好的可伸縮性。例如，當我使用 em 單位進行大小調整時，上面的主要斷點如下所示。

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

關於 CSS 媒體查詢和斷點的常見問題解答 (FAQ)

什麼是設置 CSS 斷點的最佳實踐？

CSS 斷點對於創建響應式設計至關重要。它們允許佈局在預定義點處更改，即為不同屏幕尺寸提供不同的佈局。設置 CSS 斷點的最佳實踐包括首先從移動佈局開始，然後逐步向上工作。還建議使用 em 或 rem 單位而不是像素作為斷點，因為它們更靈活且更易於訪問。最後，避免使用過多的斷點。堅持使用移動設備、平板電腦和台式機的標準尺寸。

如何將 CSS 媒體查詢用於響應式設計？

CSS 媒體查詢是創建響應式設計的強大工具。它們允許您為具有不同屏幕尺寸的不同設備應用不同的樣式。您可以使用 @media 規則、媒體功能的條件（如 max-width 或 min-width）以及您想要應用的 CSS 樣式在 CSS 中使用它們。

響應式設計的標準 CSS 斷點是什麼？

響應式設計的標準 CSS 斷點通常如下：移動設備為 320px，平板電腦縱向為 768px，平板電腦橫向和小台式機為 1024px，大台式機為 1200px。但是，這些並非硬性規定，可以根據設計的具體需求進行調整。

如何測試我的 CSS 斷點？

您可以使用瀏覽器中的檢查工具來測試您的 CSS 斷點。此工具允許您模擬不同的屏幕尺寸並查看您的佈局如何響應。此外，您可以使用 BrowserStack 或響應式設計測試網站等在線工具在不同的設備和屏幕分辨率上進行測試。

我可以使用 CSS 媒體查詢來定位特定設備嗎？

是的，您可以使用 CSS 媒體查詢來定位特定設備。但是，通常不建議這樣做，因為它會導致維護噩夢。相反，專注於創建適用於所有屏幕尺寸的響應式設計。

如何使用 CSS 媒體查詢更改字體大小？

您可以使用 CSS 媒體查詢根據屏幕尺寸更改字體大小。例如，您可能希望為更大的屏幕增加字體大小以提高可讀性。您可以通過定義具有所需屏幕尺寸的媒體查詢，然後設置新的字體大小來實現此目的。

CSS 媒體查詢中的 min-width 和 max-width 有什麼區別？

CSS 媒體查詢中的 min-width 和 max-width 指的是媒體查詢內的樣式將應用的最小和最大視口大小。 min-width 用於為大於指定值的任何視口大小應用樣式，而 max-width 用於為小於或等於指定值的任何視口大小應用樣式。

我可以將 CSS 媒體查詢與 JavaScript 一起使用嗎？

是的，您可以使用 window.matchMedia() 方法將 CSS 媒體查詢與 JavaScript 一起使用。此方法返回一個 MediaQueryList 對象，該對象表示指定 CSS 媒體查詢字符串的結果，然後可以使用它根據屏幕大小應用不同的 JavaScript 功能。

如何使用 CSS 媒體查詢處理高分辨率屏幕？

您可以使用分辨率媒體功能使用 CSS 媒體查詢處理高分辨率屏幕。此功能允許您根據屏幕的像素密度應用樣式。例如，您可能希望為高密度屏幕提供更高分辨率的圖像，以確保它們看起來清晰銳利。

我可以使用 CSS 媒體查詢檢測暗模式嗎？

是的，您可以使用 CSS 媒體查詢來檢測用戶是否將其係統設置為暗模式。您可以使用 prefers-color-scheme 媒體功能來實現此目的。此功能允許您根據用戶的首選顏色方案（即淺色或深色）應用不同的樣式。

以上是ATOZ CSS：通過媒體查詢創建響應式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！