响应式布局的基本原理是使用媒体查询（Media Queries）来控制不同设备的显示方式，当用户通过浏览器访问网站时，浏览器会根据设备类型（如桌面、平板电脑、手机等）自动调整页面的宽度和高度，以适应不同的屏幕尺寸。
以下是一个简单的响应式布局示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<style>
/* 选择器用于选择所有元素 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* 为桌面设备创建样式 */
@media screen and (min-width: 768px) {
body {
background-color: #f0f0f0;
color: #333;
font-size: 16px;
line-height: 1.5;
}
}
/* 为平板电脑创建样式 */
@media screen and (min-width: 480px) and (max-width: 767px) {
body {
background-color: #fff;
color: #333;
font-size: 14px;
line-height: 1.5;
}
}
/* 为手机创建样式 */
@media screen and (max-width: 479px) {
body {
background-color: #fff;
color: #333;
font-size: 12px;
line-height: 1.5;
}
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个简单的响应式布局示例，在这个示例中，我们使用了媒体查询来根据设备的屏幕大小调整页面的样式，当屏幕宽度小于等于768像素时，页面的背景颜色为浅蓝色，文字颜色为深灰色；当屏幕宽度在769像素到7680像素之间时，背景颜色变为浅绿色，文字颜色变为深黄色；当屏幕宽度小于7680像素时，背景颜色为浅红色，文字颜色为深紫色。</p>
</body>
</html>这个示例中，我们使用了三个媒体查询来分别处理桌面设备、平板电脑和手机，通过调整这些样式，我们可以确保在不同设备上都能获得良好的显示效果。
