1. 它们是什么？
响应式网页设计是一种网页设计和布局。 页面的设计和开发要根据用户行为和设备环境（系统平台、屏幕规格、屏幕方向等）做出相应的响应和调整。
描述响应式界面最著名的短语是“内容就像水”
用白话来说就是“如果把屏幕看作一个容器，那么内容就像水”
响应式网站的共同特征：
2. 实现方法
响应式设计的基本原理是通过媒体查询来监控不同设备屏幕规格进行处理。 为了处理移动端，页面颈部必须有一个元声明视口
例如，当浏览器的长度或高度发生变化时，可以通过比例单元使浏览器中的组件的宽度和高度随着浏览器的变化而变化html5响应式布局，从而达到响应式的效果
height 和 width 属性的比例取决于父标签的宽度和高度，但其他 bag 属性并不完全取决于父元素：
可以看到每个属性都使用了比率，这会造成布局复杂性html5响应式布局，所以不建议使用比率来实现响应式。
大众/大众
vw表示相对于视图窗口的长度，vh表示相对于视图窗口的高度。对于任何级别元素，当使用vw单位时，1vw等于视图长度的百分之一。
它与比例布局非常相似。 与%的区别在上一篇文章中已经提到过，这里不再赘述。
雷姆
前面提到，rem是相对于根元素html的font-size属性。 默认情况下，浏览器字体大小为 16px。 此时1rem = 16px
您可以使用上面提到的媒体查询来更改不同设备帧速率的 font-size 值，如下所示：
@media 屏幕和（最大宽度：414px）{html {font-size：18px}@media 屏幕和（最大宽度：375px）{html {font-size：16px}@media 屏幕和（最大宽度：320px ) {html {字体大小：12px}
为了更准确地窃听设备可视窗口的变化，我们可以在css前插入一个script标签，内容如下：
// 动态设置根元素的字体大小 function init () { // 获取屏幕长度 var width = document.documentElement.clientWidth // 设置根元素的字体大小。 此时，它的宽度是10等份。 document.documentElement.style.fontSize = width / 10 + 'px'//第一次加载应用程序，设置init() //监听手机旋转的时机，并重置 window.addEventListener( 'orientationchange', init )// 监听手机窗口变化并重置 window.addEventListener('resize', init)
无论设备的可见窗口如何变化，rem始终设置为宽度的1/10以实现比例布局。
另外，我们还可以利用element ui、antd提供的网格布局等主流UI框架来实现响应式。
概括
响应式设计实现一般考虑以下几个方面：
三、总结
可见响应式布局的优点：
缺点：
