CSS3的媒體查詢功能可以根據(jù)不同的媒體設(shè)備(如電腦、手機、平板等)的特定特征來調(diào)整元素的顯示效果。
@media screen and (min-width: 768px) { body { background-color: blue; } }
上面的代碼表示如果屏幕寬度大于等于768px,背景顏色將變成藍色。
可以使用的參數(shù)有屏幕尺寸、設(shè)備方向、像素比、打印機等,例如:
@media screen and (orientation: portrait) { /* 豎屏 */ } @media screen and (orientation: landscape) { /* 橫屏 */ } @media (min-device-pixel-ratio: 2) { /* 高清屏 */ } @media print { /* 打印時樣式 */ }
通過媒體查詢可以讓網(wǎng)站適應不同的設(shè)備,提供更好的用戶體驗。