开发一套网站，然后根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕
定向等）自适应地显示不同布局。响应式布局的核心是媒体查询。媒体查询
（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程
的简称。媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。
CSS 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">1.目录结构
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--link元素中的CSS媒体查询-->
<link rel="stylesheet" media="screen and (max-500px)" href="style.css">
<style>
.mystyle1 {
background-color:lightgreen;
}
.mystyle2 {
background-color: #64989a;
}
/*样式表中的CSS媒体查询*/
@media screen and (max- 500px) {
.mystyle1 {
background-color:lightblue;
}
}
</style>
</head>
<body>
<p>当浏览器窗口的宽度小于 500 像素时，背景颜色会有变化。</p>
<div class="mystyle1">徐同保</div>
<div class="mystyle2">徐同保</div>
</body>
</html> 3.style.css
.mystyle2 {
background: red !important;
}4.运行结果
大于500px时
小于500px时
