前端 css3 媒体查询实现 响应式布局
warning:
这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。
/* 设置基本样式 */
.container {
width: 100%;
margin: auto;
background-color: #f8f8f8;
}
/* 媒体查询实现响应式布局 */
@media (min-width: 768px) {
.container {
max-width: 750px; /* 设置最大宽度 */
}
}
@media (min-width: 992px) {
.container {
max-width: 970px; /* 设置最大宽度 */
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px; /* 设置最大宽度 */
}
}这段代码定义了一个.container类，并使用媒体查询定义了在不同屏幕宽度下的最大宽度，以实现响应式布局。在小屏设备上，容器将占据全部宽度；在大屏设备上，容器宽度会有所限制，分别在平板、笔记本、大屏电脑上有所增加，以适应不同的屏幕尺寸。
评论已关闭