响应式布局的实现方式有很多种，我们这里先介绍几种实现响应式布局的方式，然后着重介绍的是如何使用媒体查询实现响应式布局。
方式一：使用媒体查询。注意在使用媒体查询的时候，and与前后的小括号空一个空格，如果不空格的话，会报错。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,html,div {
width: 100%;
height: 100%;
}
@media screen and (min-width: 720px) {
div {
background: red;
}
}
@media screen and (max-width: 720px) and (min-width: 500px) {
div {
background: pink;
}
}
@media screen and (max-width: 500px) {
div {
background: yellow;
}
}
</style>
</head>
<body>
<div>看看颜色你变不变</div>
</body>
</html>方式二：使用rem作为单位。首先是给html标签设置一个字体大小，然后在其他标签内使用rem单位就可以了，比如：假如html标签字体大小设置的为12px，那么其他标签如果设置为1rem就相当于12px，如果是2rem，那么就相当于24rem。
方式三：使用百分比设置宽度高度即可
方式四：使用弹性盒子进行布局
方式五：使用boostrap进行布局即可。