说到响应式，我们会想到媒体查询 @media、rem、vw、vh、viewport等这些词汇。背后真正的逻辑是什么似乎并不重要。做了 h5 项目发现，自己之前理解的并不透彻，所以将自己的思考记录下来，拿出来大家探讨一下，我的想法是否正确。
真正的响应式，我想是手机端、ipad、电脑端各做一套样式，先判断终端类型，然后显示不同的样式。由于这么做成本比较高，实际中公司需要开发的页面并不会这么做。通常情况，响应式实现方案包括两种：一种是等比例缩放设计稿，也就是小屏幕和大屏幕看到内容是一样的，不同之处在于大屏幕看到的字体更大，间距更大，高度更大而已。而小屏幕则是等比例缩小显示。第二种是大屏幕和小屏幕看到的字体、间距、高度是一样的，那么大屏幕看到的内容会更多。
实际中，在不同屏幕上需要考虑大小的内容拆分一下主要包括：
- 字体大小
- 元素的宽度和高度
- 元素间距
方案一
等比例缩放设计稿，则前端可以采用 rem、vw相对单位定义尺寸，以 rem 为例说明，页面元素都用 rem 单位，那么，当页面尺寸变大的时候，重新设置 html 元素的 font-size 大小，则对应的 rem 设置的元素也会变大。页面表现出来就是大屏幕和小屏幕看到的内容一样，只是大屏幕的字体更大、元素更大、间距更大。
方案二
设置 name="viewport" content="width=device-width"，宽度尽量使用百分比控制、高度使用 px，然后间距和字体也使用 px，则这么表现出来就是大屏幕和小屏幕看到的字体、间距一样，大屏幕看到的内容更多一些。
