响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容;自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
语法：
@media[not|only] type [and][expr] (media feature){
rules
}
type媒体类型：all(所有设备)、screen(用于电脑屏幕，平板电脑，智能手机等。)
media feature
1）width(浏览器的窗口尺寸，可加min/max)
2）device-width(设备的参数尺寸，可加min/max)
min-width：最小宽度，在媒体查询中，宽度大于或者等于最小宽度时，就触发其CSS样式
max-width：最大宽度，在媒体查询中，宽度小于或者等于最大宽度时，就触发其CSS样式
注：
1.一般都是先实现PC端页面，然后再去做其他设备的兼容（把媒体查询写在默认样式之后）
2.设置宽度时，最好不要写死(px)，而是用%单位参照父元素的大小
1.直接在 CSS 文件中使用
<style type="text/css">
// 没有经过媒体查询限制的 CSS
@media 类型 and (条件 1) and (条件 2){
// 媒体查询生效才会执行的 CSS
}
</style>
2.使用import导入
// 当所有设备的宽度小于 980px 时，才会使用 import 导入 CSS 文件
@import url("css/media.css") all and (max-width:980px);
3.使用 link 链接，media 作为属性用于设置查询方式
// 当所有设备的宽度小于 980px 时，才会使用 link 链接 CSS 文件
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" />
注：媒体查询的优先级与普通 CSS 完全相同，因此当使用媒体查询时，一定要将媒
体查询的样式放在默认样式之后，否则媒体查询会被默认样式覆盖，也就无法针对不同设备
进行变化
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(242, 242, 242);
}
nav {
width: 100%;
height: 40px;
text-align: center;
padding-top: 10px;
}
nav p {
margin-top: 10px;
}
.content {
width: 100%;
margin-top: 40px;
}
.content>div {
width: 50%;
float: left;
}
.left img {
width: 90%;
height: 600px;
}
.right {
/* background-color: aqua; */
height: 850px;
margin-left: -40px;
}
table {
width: 100%;
/* width: 300px;
margin-bottom: 10px; */
}
table tr {
width: 100%;
/* margin-top: 20px;
*/
height: 30px;
}
table tr td {
font-size: 20px;
}
table tr td input:not([type=button]),
table tr td select {
width: 80%;
height: 40px;
}
table tr td textarea {
width: 80%;
}
table tr td input[type=button] {
width: 100px;
height: 40px;
background-color: green;
}
@media screen and (max-width:600px) {
.content>div {
float: none;
width: 100%;
text-align: center;
}
}
<nav>
<h1>联系我们</h1>
<p>请填写信息：</p>
</nav>
<div class="content">
<div class="left">
<img src="../image/map.png" alt="">
</div>
<div class="right">
<table>
<tr>
<td>联系人</td>
</tr>
<tr>
<td><input type="text" placeholder="请输入姓名.."></td>
</tr>
<tr>
<td>联系电话</td>
</tr>
<tr>
<td><input type="text" placeholder="请输入邮箱.."></td>
</tr>
<tr>
<td>测试</td>
</tr>
<tr>
<td><select name="city" id="city">
<option>北京</option>
<option selected="selected">上海</option>
<option>厦门</option>
</select></td>
</tr>
<tr>
<td>留言</td>
</tr>
<tr>
<td><textarea id="contents" cols="30" rows="10" placeholder="反馈信息"></textarea></td>
</tr>
<tr>
<td><input type="button" name="" id="" value="提交"></td>
</tr>
</table>
</div>
</div>
html {
font-size: 12px;
}
div {
font-size: 2rem; /* 24px */
width: 5rem; /* 60px */
background-color: skyblue;
}