關(guān)鍵要點(diǎn)

• 避免在創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)使用特定設(shè)備的斷點(diǎn)。相反，設(shè)置主要斷點(diǎn)和次要微調(diào)點(diǎn)，這些斷點(diǎn)大約是大多數(shù)手機(jī)、平板電腦和臺(tái)式/筆記本電腦設(shè)備的尺寸。
• 使用 em 或 rem 作為斷點(diǎn)單位，而不是像素，以獲得更好的可伸縮性。如果用戶縮放頁(yè)面或增加文本大小，這將有所幫助。
• CSS 媒體查詢是創(chuàng)建響應(yīng)式設(shè)計(jì)的強(qiáng)大工具。它們?cè)试S您為具有不同屏幕尺寸的不同設(shè)備應(yīng)用不同的樣式。但是，避免使用它們來(lái)定位特定設(shè)備，因?yàn)檫@會(huì)導(dǎo)致維護(hù)噩夢(mèng)。相反，專注於創(chuàng)建適用於所有屏幕尺寸的響應(yīng)式設(shè)計(jì)。

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

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

M 代表媒體查詢

我猜想，絕大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)人員如今都熟悉響應(yīng)式設(shè)計(jì)的概念。如果不是，請(qǐng)查看媒體查詢屏幕截圖。

由於響應(yīng)式設(shè)計(jì)非常流行，因此這是一個(gè)學(xué)習(xí)一些技巧的好地方，這些技巧可以改進(jìn)我們?yōu)槎喾N設(shè)備開(kāi)發(fā)網(wǎng)站和應(yīng)用程序的方式。以下是一些 CSS 提示，可以幫助您。

技巧 1：不要使用特定設(shè)備的斷點(diǎn)

希望這不用說(shuō)，但以防萬(wàn)一您需要提醒或以前沒(méi)有遇到過(guò)這種最佳實(shí)踐，我認(rèn)為值得重申一下。

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

<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>

這些斷點(diǎn)已針對(duì) Apple 設(shè)備設(shè)置，並具有“神奇數(shù)字”值，例如 768px 或 1024px。

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

媒體查詢將不會(huì)生效，並且該設(shè)備尺寸的樣式將不會(huì)應(yīng)用。

有時(shí)您可能需要斷點(diǎn)的非常具體的數(shù)值（稍後會(huì)詳細(xì)介紹），但在我看來(lái)，看到這些特定設(shè)備的斷點(diǎn)是一種代碼異味。

那麼你應(yīng)該怎麼做呢？

技巧 2：設(shè)置主要斷點(diǎn)和次要微調(diào)點(diǎn)

在響應(yīng)式項(xiàng)目上工作時(shí)，我傾向於設(shè)置任意整數(shù)斷點(diǎn)，這些斷點(diǎn)大約是大多數(shù)手機(jī)、平板電腦和臺(tái)式/筆記本電腦設(shè)備的尺寸。

我傾向於使用以下主要斷點(diǎn)（儘管有時(shí)這可能會(huì)根據(jù)項(xiàng)目而有所更改）：

<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>

使用這些斷點(diǎn)不會(huì)將設(shè)計(jì)限制為僅在這些點(diǎn)處更改，而是為使用三種主要設(shè)備類型提供良好的基礎(chǔ)。

對(duì)於基於內(nèi)容的設(shè)計(jì)調(diào)整（即：當(dāng)內(nèi)容開(kāi)始看起來(lái)?yè)p壞、不平衡或不太適合時(shí)），您可以使用微調(diào)點(diǎn)來(lái)調(diào)整元素並潤(rùn)色項(xiàng)目的細(xì)節(jié)。

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

/* 平板電腦和小顯示器 */
@media screen and (min-width: 800px;) {}

/* 筆記本電腦和臺(tái)式機(jī) */
@media screen and (min-width: 1200px;) {}</code>

技巧 3：使用 em 或 rem 作為斷點(diǎn)單位

不要使用 px，而是使用這些相對(duì)單位之一，以便如果用戶縮放頁(yè)面或增加文本大小，可以獲得更好的可伸縮性。例如，當(dāng)我使用 em 單位進(jìn)行大小調(diào)整時(shí)，上面的主要斷點(diǎn)如下所示。

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

關(guān)於 CSS 媒體查詢和斷點(diǎn)的常見(jiàn)問(wèn)題解答 (FAQ)

什麼是設(shè)置 CSS 斷點(diǎn)的最佳實(shí)踐？

CSS 斷點(diǎn)對(duì)於創(chuàng)建響應(yīng)式設(shè)計(jì)至關(guān)重要。它們?cè)试S佈局在預(yù)定義點(diǎn)處更改，即為不同屏幕尺寸提供不同的佈局。設(shè)置 CSS 斷點(diǎn)的最佳實(shí)踐包括首先從移動(dòng)佈局開(kāi)始，然後逐步向上工作。還建議使用 em 或 rem 單位而不是像素作為斷點(diǎn)，因?yàn)樗鼈兏`活且更易於訪問(wèn)。最後，避免使用過(guò)多的斷點(diǎn)。堅(jiān)持使用移動(dòng)設(shè)備、平板電腦和臺(tái)式機(jī)的標(biāo)準(zhǔn)尺寸。

如何將 CSS 媒體查詢用於響應(yīng)式設(shè)計(jì)？

CSS 媒體查詢是創(chuàng)建響應(yīng)式設(shè)計(jì)的強(qiáng)大工具。它們?cè)试S您為具有不同屏幕尺寸的不同設(shè)備應(yīng)用不同的樣式。您可以使用 @media 規(guī)則、媒體功能的條件（如 max-width 或 min-width）以及您想要應(yīng)用的 CSS 樣式在 CSS 中使用它們。

響應(yīng)式設(shè)計(jì)的標(biāo)準(zhǔn) CSS 斷點(diǎn)是什麼？

響應(yīng)式設(shè)計(jì)的標(biāo)準(zhǔn) CSS 斷點(diǎn)通常如下：移動(dòng)設(shè)備為 320px，平板電腦縱向?yàn)?768px，平板電腦橫向和小臺(tái)式機(jī)為 1024px，大臺(tái)式機(jī)為 1200px。但是，這些並非硬性規(guī)定，可以根據(jù)設(shè)計(jì)的具體需求進(jìn)行調(diào)整。

如何測(cè)試我的 CSS 斷點(diǎn)？

您可以使用瀏覽器中的檢查工具來(lái)測(cè)試您的 CSS 斷點(diǎn)。此工具允許您模擬不同的屏幕尺寸並查看您的佈局如何響應(yīng)。此外，您可以使用 BrowserStack 或響應(yīng)式設(shè)計(jì)測(cè)試網(wǎng)站等在線工具在不同的設(shè)備和屏幕分辨率上進(jìn)行測(cè)試。

我可以使用 CSS 媒體查詢來(lái)定位特定設(shè)備嗎？

是的，您可以使用 CSS 媒體查詢來(lái)定位特定設(shè)備。但是，通常不建議這樣做，因?yàn)樗鼤?huì)導(dǎo)致維護(hù)噩夢(mèng)。相反，專注於創(chuàng)建適用於所有屏幕尺寸的響應(yīng)式設(shè)計(jì)。

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

您可以使用 CSS 媒體查詢根據(jù)屏幕尺寸更改字體大小。例如，您可能希望為更大的屏幕增加字體大小以提高可讀性。您可以通過(guò)定義具有所需屏幕尺寸的媒體查詢，然後設(shè)置新的字體大小來(lái)實(shí)現(xiàn)此目的。

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

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

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

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

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

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

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

是的，您可以使用 CSS 媒體查詢來(lái)檢測(cè)用戶是否將其係統(tǒng)設(shè)置為暗模式。您可以使用 prefers-color-scheme 媒體功能來(lái)實(shí)現(xiàn)此目的。此功能允許您根據(jù)用戶的首選顏色方案（即淺色或深色）應(yīng)用不同的樣式。

以上是ATOZ CSS：通過(guò)媒體查詢創(chuàng)建響應(yīng)式設(shè)計(jì)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！