CSS的Media標簽用于指定不同設備的不同樣式,例如手機、平板電腦、臺式機等等。在實際應用中,Media標簽反映出了Web開發者日益重視設備兼容性的重要性,優化了用戶體驗。
@media screen and (max-width: 768px) { /* 手機端樣式 */ body { font-size: 16px; } } @media screen and (min-width: 769px) and (max-width: 1024px) { /* 平板電腦端樣式 */ body { font-size: 18px; } } @media screen and (min-width: 1025px) { /* 臺式機端樣式 */ body { font-size: 20px; } }
如上所示,使用@media關鍵字加上不同的設備參數可以實現不同設備的樣式指定。其中max-width屬性表示當前寬度小于等于其值時,應用該樣式,而min-width屬性表示當前寬度大于等于其值時,應用該樣式。
此外,Media標簽也可以用于其他媒體類型,如打印機、TV等等,是一個非常重要的CSS基礎知識點。
上一篇css的li樣式