CSS响应式布局（网页如何根据不同尺寸调整状态）
CSS响应式布局是一种设计方法，使得网页可以在各种屏幕尺寸和设备上工作良好。实现方法是通过CSS媒体查询来应用不同的样式规则，以适应不同的屏幕宽度。
以下是一个简单的响应式布局示例：
/* 基础样式，适用于大屏幕设备 */
.container {
width: 100%;
margin: auto;
}
/* 当屏幕宽度小于或等于768像素时，调整布局 */
@media (max-width: 768px) {
.container {
width: 80%;
margin: auto;
}
}
/* 当屏幕宽度小于或等于480像素时，调整布局 */
@media (max-width: 480px) {
.container {
width: 100%;
margin: 0;
}
}在这个例子中，.container 类定义了一个容器的基础样式。通过媒体查询，当屏幕尺寸减小时，.container 类的样式会相应调整，以适应不同的屏幕大小。
评论已关闭