/* 定义屏幕尺寸 */
@media screen and (max-width: 768px) {
/* 在768px以下的屏幕尺寸应用以下样式 */
body {
background-color: yellow;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 在769px-1024px之间的屏幕尺寸应用以下样式 */
body {
background-color: blue;
}
}
@media screen and (min-width: 1025px) {
/* 在1025px及以上的屏幕尺寸应用以下样式 */
body {
background-color: green;
}
}在上述代码中，大家使用@media查询来定义不同屏幕尺寸下的CSS样式。通过查询@media screen并且(max-width: 768px)，大家可以定义在768px以下的屏幕尺寸下应用的样式。同样，大家可以定义在769px-1024px，1025px及以上的屏幕尺寸下应用的样式。
在使用@media查询时，需要注意以下几点：
- 将媒体查询放在样式表的最后一项
- 媒体查询中的样式将覆盖之前的样式
- 查询顺序非常重要，在样式重叠时，CSS将根据查询顺序来确定使用哪个样式
通过使用@media查询，大家可以为不同尺寸的屏幕定制不同的CSS样式，提高网页的可用性和用户体验。在进行网页开发时，需要考虑不同屏幕尺寸下的展示效果，这样大家才能真正实现自适应的网页设计，满足用户的需求。