/* 基本样式 */
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