這是什麼意思@media只有屏幕和（分設備寬度：320像素）和（最大設備寬度：480像素）

Question

這是什麼意思在WordPress的二十十一主題的css文件。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Answer 1

這就是所謂的CSS3 Media Queries這是一種技術來幫助您的網站適應不同的屏幕尺寸，或者基本上，它有助於提供不同的風格不同的設備。

既然你是新的，讓我們打破你的媒體查詢兩個部分組成：

@media only screen 

這意味着我們將CSS樣式應用於設備與屏幕。這裏使用的關鍵字only從看到手機樣式表中隱藏舊的瀏覽器樣式表。

and (min-device-width: 320px) and (max-device-width: 480px) 

這是相當明顯的，因爲它意味着，當裝置具有屏幕的最小320px尺寸和寬度尺寸最大的480px指定CSS 僅施加。

Answer 2

媒體查詢規範還提供了只有關鍵字，它的目的是從舊的瀏覽器隱藏媒體查詢。不一樣，關鍵字必須在聲明的開頭。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)" 

瀏覽器不承認媒體查詢期待一個逗號分隔的媒體類型的列表，並規範說，他們應在第一個非字母數字字符，是不是連字符之前立即截斷每個值。所以，早期瀏覽器應該解釋前面的例子是這樣的：

media="only" 

例子逐一

@media (max-width:632px) 

這人說用的632px要應用最大寬度的窗口這些樣式。在大小的情況下，在大多數情況下，你會談論的東西比桌面屏幕小。

@media screen and (max-width:632px) 

這是一個屏幕和最大寬度爲632px的窗口設備應用樣式。這與上述內容幾乎相同，除了您指定的是屏幕，而不是其他可用的媒體類型（最常見的其他媒體類型正在打印）。

樣式與小屏幕許多智能手機，你可以寫：

@media screen and (max-width:480px) { … } 

爲了阻止看到一個iPhone或Android手機樣式表舊的瀏覽器，你可以寫：

@media only screen and (max-width: 480px;) { … } 

Answer 3

讓我們瞭解代碼的含義逐步：

您的編碼是：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

的@media規則用於定義不同的媒體類型/設備的不同樣式規則。

僅限關鍵字可防止不支持媒體查詢的舊版瀏覽器使用媒體功能應用給定樣式。它對現代瀏覽器沒有影響。

要與屏幕，其最小和最大寬度是已知的限制樣式設備，可以鏈媒體功能到屏幕媒體類型：

screen and (min-device-width: 320px) and (max-device-width: 480px) 

進一步指導可以檢查MDN website by clicking here