什么是响应式布局？相信很多刚接触前端的同学们都不清楚，我同是，以前觉得响应式很简单，简单到以为对块元素加上百分比之后网页就是响应式的。但是我错了，做出来的网页在大小不同的屏幕上显示，虽然宽度适应了，但是高度却是固定的，所以页面就被拉长了，用户体验为0。
响应式就是同一个网站能够兼容pc、ipad、移动便携式设备（手机）等大小不一的屏幕，而不是像以前一样去写不同的网站来适应不同的设备。
通过学习，我认为响应式也很简单，几步就轻松完成，但是代码量有点大，因为我还不会缩小代码量。
第一步，在html文件里的head标记里添加代码。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
代码作用：网站显示为1:1，且禁止缩放
第二步，在css文件里，使用媒体查询@media query来设置样式。在这里通常需要设置多个宽度的样式，来适应不同屏幕。
@media only screen and (min-width:1024px){1024以上屏幕显示
}
@media only screen and (min-width:768px) and (max-width:1023px){768到1023屏幕显示
}
@media only screen and (max-width:767px){767以下屏幕显示
}
第三步，使用rem、em以及宽度百分比来控制。
关于rem，在我的博客里也有介绍，链接：https://blog.csdn.net/weixin_45369499/article/details/100652926。
第四步，完成不用屏幕下的css样式，就完成了响应式布局。