css响应式设计代码

### 关于CSS响应式设计的代码示例

#### 使用媒体查询实现响应式布局
通过设置不同的断点，可以针对各种屏幕尺寸调整页面元素的样式。下面是一个简单的例子：

/* 基础样式 */
.container {
    width: 100%;
    padding: 0;
}

@media (min-width: 768px) { /* 当视口宽度大于等于768px时应用此规则 */
    .container {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (min-width: 992px) { /* 当视口宽度大于等于992px时应用此规则 */
    .container {
        max-width: 970px;
    }
}
@media (min-width: 1200px) { /* 当视口宽度大于等于1200px时应用此规则 */
    .container {
        max-width: 1170px;
    }
}

这段代码展示了如何利用`@media`查询来创建一个自适应容器，在不同分辨率下自动调整最大宽度[^4]。

#### 百分比宽度的应用
为了使网页能够更好地适配移动设备和其他小型显示器，推荐采用百分比作为宽度单位而非固定像素值。这有助于构建更加灵活的内容区域。

.box {
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

.smallBox {
    width: 32%; /* 设置较小盒子占据大约三分之一的空间 */
    margin-right: 1%;
}

.largeBox {
    width: 65%; /* 较大盒子则占用剩余大部分空间 */
    margin-bottom: 1%;
}

这里定义了一个两栏式的布局结构，其中左侧的小方格占总宽约三成而右侧大方格接近七成，两者之间留有轻微间隔以保持美观[^5]。