CSS多媒體查詢是一種非常靈活的技術,可以使我們更好地控制網頁的樣式。現在越來越多的人使用不同尺寸的設備來訪問網頁,而使用多媒體查詢可以根據屏幕大小來調整元素的大小、位置等屬性。
其中一個常用的查詢就是根據屏幕高度來調整樣式。我們可以使用min-height和max-height屬性來定義不同高度下的樣式。
@media screen and (min-height: 500px) { /* 當屏幕高度大于等于500px時的樣式 */ body { background-color: #f5f5f5; } } @media screen and (max-height: 500px) { /* 當屏幕高度小于等于500px時的樣式 */ body { background-color: #fff; } }
在上面的代碼中,我們使用@media查詢來對不同高度下的body元素的背景色進行了定義。當屏幕高度大于等于500px時,背景色為#f5f5f5;當屏幕高度小于等于500px時,背景色為#fff。
同樣的,我們也可以根據屏幕寬度來調整樣式:
@media screen and (min-width: 768px) { /* 當屏幕寬度大于等于768px時的樣式 */ #nav { display: block; } } @media screen and (max-width: 768px) { /* 當屏幕寬度小于等于768px時的樣式 */ #nav { display: none; } }
上面的代碼將導航欄#nav的顯示與屏幕寬度掛鉤,當屏幕寬度大于等于768px時,導航欄以塊級元素的形式顯示;當屏幕寬度小于等于768px時,導航欄被隱藏。
通過CSS多媒體查詢,我們可以輕松地實現響應式布局,適應不同尺寸的設備。