移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font-size来实现响应式。
但这种方案也有一个缺点，那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题，对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。
解决前端响应式无非就是在不同的设备下可以正常展示，这里介绍一种不需要rem方式的响应式方案。直接使用px，这里说的是基于750px的设计稿。设计稿中你量出来是多少px，样式中
直接写多少px。这样是不是很快捷，也不需要rem换算。
transform
transform-origin
这里其实就是用到了transform的scale缩放页面大小来实现响应式。
核心代码：
1 let screenMatch = () => { 2 document.body.style.setProperty('visibility', 'hidden') 3 let page = document.getElementById("page"); 4 let _scale = window.outerWidth/750; 5 6 page.style.setProperty("transformOrigin", "0 0"); 7 page.style.setProperty("transform", "scale("+ _scale + ")"); 8 //兼容ios8 9 page.style.setProperty("-webkit-transform-origin", "0 0"); 10 page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")"); 11 setTimeout(() => { 12 13 page.style.setProperty("transformOrigin", "0 0"); 14 page.style.setProperty("transform", "scale("+ _scale + ")"); 15 //兼容ios8 16 page.style.setProperty("-webkit-transform-origin", "0 0"); 17 page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")"); 18 document.body.style.setProperty('visibility', 'visible') 19 }, 100); 20 21 } 22 screenMatch(); 23 window.onresize = screenMatch;