CSS的@media
规则是一种条件语句,它允许你根据不同的媒体类型和条件来应用不同的样式规则。这使得你能够根据不同的屏幕尺寸、分辨率、设备方向等条件来定制网页的布局和样式,从而创建响应式和适应性强的网站。
基本语法
@media media-type and (media-feature-and-value) {
/* CSS 规则 */
}
- media-type:可选。指定媒体类型,如
screen
(屏幕)、print
(打印)、speech
(屏幕阅读器)等。如果不指定,则默认为all
,表示所有媒体类型。 - media-feature-and-value:必须。一个或多个特性条件,用于测试媒体特征,如
min-width
、max-width
、orientation
等,以及它们的值。
示例
根据屏幕宽度调整样式
/* 当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 当屏幕宽度大于或等于600px时 */
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
根据设备方向调整样式
/* 当设备处于横向模式时 */
@media screen and (orientation: landscape) {
body {
margin: 0;
}
}
/* 当设备处于纵向模式时 */
@media screen and (orientation: portrait) {
body {
margin: 20px;
}
}
嵌套@media规则
@media
规则可以嵌套使用,允许你根据多个条件来定义样式。
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
font-size: 18px;
}
}
注意事项
- 尽可能将
@media
规则放在CSS文件的顶部,以确保它们被首先解析和应用。 - 使用
@media
规则时,要确保你的样式表被正确加载和解析,以便在不同的媒体条件下应用相应的样式。 - 合理使用
@media
规则可以显著提高网站的可用性和用户体验,但也要注意不要过度使用,以免增加CSS文件的复杂性和加载时间。