1、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">标签一定要有
2、px用在边框和小图标上面
3、百分比用在类似宫格的布局上面，如三个盒子33.3%
4、rem加媒体查询只会在指定的设备断点处发生变化，不能实现实时响应式
5、vw加媒体查询可以做到实时响应式，但需要将px换算成vw，比较麻烦
6、使用em作为字体单位，结合媒体查询根据body的fontsize可以实现字体响应式
7、rem加vw加媒体查询可以实现实时响应式，换算简单
8、根据screen.width判断屏幕宽度，可以实现如果是桌面端就是click事件，如果是移动端就是touchstart事件，使js逻辑更加清晰
总结：
一、对布局的精度要求不高时，使用bootstrap4的栅格加上媒体查询，字体使用em为单位可以非常快速的开发响应式网站
二、对布局的精度要求比较细时，不使用任何响应式框架，vw加rem实现布局响应，字体使用em实现字体响应，高度自动或者也可以写死，
灵活使用px(边框和小图标)和百分比(宫格布局)，熟练使用grid和flex布局，最终就可以实现完美响应式
来源：https://www.cnblogs.com/rrrjc/p/12499540.html