媒體查詢中的「螢幕」和「僅螢幕」有什麼區別？

在CSS 中，媒體查詢在創建響應式網頁設計中發揮著重要作用，如今響應式設計是每個網站吸引訪客所需的重要內容之一。

一般來說，我們可以使用@media CSS規則來寫媒體查詢。但是，我們可以在媒體查詢中使用不同的條件和關鍵字來定位不同的裝置。例如，行動裝置、桌上型裝置、印表機螢幕等

在本教程中，我們將了解媒體查詢中「螢幕」和「僅螢幕」之間的差異。

媒體查詢中的畫面是什麼？

在 CSS 中，我們在媒體查詢中使用「screen」關鍵字來定位所有具有螢幕的設備，例如平板電腦、行動裝置、桌上型電腦、印表機、螢幕閱讀器等。

＃＃＃句法＃＃＃

使用者可以依照下列語法在媒體查詢中使用 screen 關鍵字。

雷雷

在上述語法中，條件用於為不同裝置設定斷點。

範例 1

的中文翻譯為：

範例 1

在下面的範例中，我們在 CSS 中的媒體查詢中使用了 screen 關鍵字。我們有一個包含「text」類別名稱的 div 元素。

在桌面上，主體的背景顏色為“aqua”，但對於螢幕尺寸小於1200 px的設備，我們將其更改為“yellow”。此外，我們也為小於 1200 px 的裝置變更了 div 元素的樣式。

在輸出中，使用者可以更改瀏覽器視窗的大小並觀察樣式的差異。

雷雷

媒體查詢中最上面的畫面是什麼？

在CSS中撰寫媒體查詢時，我們也可以使用「only」關鍵字與「screen」關鍵字一起使用。當我們使用「only」關鍵字時，它只在符合媒體類型和媒體特性的瀏覽器中使用時應用媒體查詢中的樣式。

然而，較舊的瀏覽器具有「only」關鍵字的特殊效果。例如，假設較舊的瀏覽器不支援媒體查詢和媒體功能。在這種情況下，當裝置與媒體類型規範不符時，他們不應套用媒體查詢區塊內定義的樣式。

然而，所有現代瀏覽器都會忽略「only」關鍵字。

＃＃＃句法＃＃＃

使用者可以依照下列語法在媒體查詢中使用「only」關鍵字。

雷雷

範例2

在下面的範例中，我們定義了「multiple」div 元素，其中包含五個「single」div 元素。我們設計了「多個」和「單一」div 元素的樣式。

此外，我們還使用媒體查詢為寬度小於 680 像素的裝置設計網頁樣式。使用者可以更改瀏覽器視窗的大小並觀察單一和多個 div 元素的設計差異。

雷雷

媒體查詢中螢幕和僅螢幕之間的差異？

這裡我們已經在差異表中解釋了媒體查詢中分割畫面和僅分割畫面的差異

屬性的中文翻譯為：屬性 的中文翻譯為： 文法它面向所有設備，如智慧型手機、桌上型電腦、平板電腦等。用戶了解了「螢幕」和「僅螢幕」媒體類型之間的差異。 「only」關鍵字在現代瀏覽器中沒有任何影響，因為它總是忽略「only」關鍵字，但它對於舊版瀏覽器版本很有用。

「螢幕」媒體類型	「僅螢幕」媒體類型		Syntax
#@media screen { /* CSS 程式碼 */ }	@media only screen { /* CSS程式碼 */ }		目標
它還針對那些不支援掃描器或印表機等媒體類型和功能的設備之外的所有設備。

以上是媒體查詢中的「螢幕」和「僅螢幕」有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！