CSS3 中的媒体查询(Media Queries)允许你根据设备的特性和屏幕的属性应用不同的样式。这对于创建响应式设计(Responsive Design)非常有用,使得网站可以适应不同的设备和屏幕大小。以下是一个简单的媒体查询的例子:
/* 基本样式 */
body {
    font-size: 16px;
}

/* 当屏幕宽度小于等于600像素时应用的样式 */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* 当屏幕宽度在601到900像素之间时应用的样式 */
@media only screen and (min-width: 601px) and (max-width: 900px) {
    body {
        font-size: 18px;
    }
}

/* 当屏幕宽度大于900像素时应用的样式 */
@media only screen and (min-width: 901px) {
    body {
        font-size: 20px;
    }
}

在这个例子中,我们使用了媒体查询来根据屏幕的宽度应用不同的字体大小。你可以根据需要修改条件和样式。媒体查询可以检查不仅仅是屏幕宽度,还可以检查设备的方向、分辨率、设备类型等等。以下是一些常见的媒体查询条件:

  •  width: 屏幕或视口的宽度。

  •  height: 屏幕或视口的高度。

  •  orientation: 设备的方向(横向或纵向)。

  •  aspect-ratio: 屏幕或视口的宽高比。

  •  resolution: 设备的分辨率。


你可以根据需要组合这些条件,以创建适应不同设备和屏幕的样式。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12575/CSS