分辨率樣式(@media)是CSS的一種特殊屬性,可用于在不同分辨率的屏幕上提供不同的CSS樣式。在移動設備中尤為常見,以適應各種不同分辨率的屏幕。使用@media屬性,開發人員可以為具有不同分辨率的移動設備定制不同的CSS樣式。下面是該屬性的用法示例:
@media screen and (max-width: 480px) { /* 在最大寬度為480px的屏幕上應用以下樣式 */ body { background-color: blue; } }
上面的代碼意味著在屏幕寬度小于或等于480像素的情況下,body元素的背景色將變為藍色。當然,可以使用各種不同的CSS樣式,以適應不同的分辨率。
下面是一些示例:
@media screen and (max-width: 768px) { /* 移動設備橫屏時 */ } @media screen and (max-width: 640px) { /* iPhone 6/7/8 Plus縱屏時 */ } @media screen and (max-width: 414px) { /* iPhone 6/7/8縱屏時 */ } @media screen and (max-width: 375px) { /* iPhone 5/SE縱屏時 */ } @media screen and (max-width: 320px) { /* iPhone 4S/5C/5S, Samsung Galaxy等縱屏時 */ }
使用這些示例,即可為不同尺寸的移動設備定制不同的CSS樣式,以適應不同的分辨率。