CSS媒體查詢是一種非常強大的技術,它幫助我們在不同平臺上創建自適應樣式。在這篇文章中,我們將介紹如何使用媒體查詢在頭部中實現自適應。
/*默認樣式*/ header { background-color: #333; color: #fff; height: 50px; padding: 10px; } /*當屏幕寬度小于768像素時*/ @media only screen and (max-width: 767px) { header { height: 100px; padding: 20px; } } /*當屏幕寬度在768像素和992像素之間時*/ @media only screen and (min-width: 768px) and (max-width: 991px) { header { height: 70px; padding: 15px; } } /*當屏幕寬度大于992像素時*/ @media only screen and (min-width: 992px) { header { height: 50px; padding: 10px; } }
在上面的代碼中,我們首先定義了默認的頭部樣式。接下來,我們使用媒體查詢來根據屏幕寬度調整頭部的高度和內邊距。當屏幕寬度小于768像素時,頭部高度增加到100像素并增加20像素的內邊距。當寬度在768和992像素之間時,頭部高度減少到70像素,并減少15像素的內邊距。最后,當屏幕寬度大于992像素時,頭部恢復到默認的高度和內邊距。
通過使用媒體查詢,我們可以讓頭部在不同的設備上呈現不同的樣式,從而達到自適應的效果。
上一篇mysql數據庫嵌入式