在现代网页设计中，确保网站能够在不同分辨率的PC屏幕上完美显示至关重要。随着显示器分辨率的多样化，从高清（HD）到4K甚至更高，设计适应各种屏幕的网页已成为一项基本需求。本文将介绍如何使用CSS技术实现这一目标，从而创建一个响应式网页。
1. 媒体查询（Media Queries）
媒体查询是CSS3引入的强大功能，允许开发者根据设备的特性（如宽度、高度、分辨率等）应用不同的样式。这是实现响应式设计的基础。
示例代码：
/* 默认样式，适用于较宽的屏幕 */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
/* 当屏幕宽度小于1200px时应用 */
@media (max-width: 1200px) {
.container {
width: 90%;
}
}
/* 当屏幕宽度小于992px时应用 */
@media (max-width: 992px) {
body {
font-size: 14px;
}
.container {
width: 95%;
}
}
/* 当屏幕宽度小于768px时应用，通常用于平板电脑 */
@media (max-width: 768px) {
body {
font-size: 12px;
}
.container {
width: 100%;
}
}2. 弹性盒布局（Flexbox）
Flexbox是一种一维布局模型，设计用于在容器中更灵活地排列子元素。它非常适用于创建响应式布局，因为可以根据可用空间自动调整子元素的大小和位置。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 calc(33.333% - 20px); /* 每个子元素占据三分之一的宽度，减去边距 */
margin: 10px;
}
/* 当屏幕宽度小于992px时调整布局 */
@media (max-width: 992px) {
.item {
flex: 1 1 calc(50% - 20px); /* 每个子元素占据一半的宽度 */
}
}
/* 当屏幕宽度小于768px时调整布局 */
@media (max-width: 768px) {
.item {
flex: 1 1 100%; /* 每个子元素占据全部宽度 */
}
}3. 网格布局（CSS Grid）
CSS Grid是一种二维布局系统，可以更轻松地创建复杂的网页布局。它允许开发者定义行和列，并根据需要调整元素的大小和位置。
示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建三列布局 */
gap: 10px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
/* 当屏幕宽度小于992px时调整布局 */
@media (max-width: 992px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 创建两列布局 */
}
}
/* 当屏幕宽度小于768px时调整布局 */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 创建单列布局 */
}
}
