CSS3媒体查询实现不同宽度的下不同内容的展示
/* 设置默认样式 */
.content {
background-color: #f9f9f9;
padding: 20px;
font-size: 16px;
}
/* 当屏幕宽度小于或等于600px时，修改.content的样式 */
@media screen and (max-width: 600px) {
.content {
background-color: #ddd;
font-size: 14px;
}
}
/* 当屏幕宽度在400px到600px之间时，修改.content的样式 */
@media screen and (min-width: 400px) and (max-width: 600px) {
.content {
background-color: #bbb;
padding: 10px;
}
}
/* 当屏幕宽度小于400px时，修改.content的样式 */
@media screen and (max-width: 400px) {
.content {
background-color: #999;
padding: 5px;
}
}这段代码定义了一个.content类，并使用媒体查询定义了在不同屏幕宽度下该类应用的不同样式。这是响应式设计的一个基本示例，可以根据实际需求进行扩展和应用。
评论已关闭