px单位html5响应式方案

移动端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;

上述代码中id为page的是整个页面元素开始的跟节点，body下的第一个元素。这里body/html要设置min-height:100%;height:100%;

其实咱们在小程序中也能够使用px单位，可是小程序中使用transform的时候会有一些字体锯齿的bug，最后换了zoom属性就行了，同时使用-webkit-zoom作兼容。核心代码跟h5的差异不大一样放的是缩放大小