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"); // id为page的跟节点
 4             let _scale = (window.screen.width || document.documentElement.clientWidth || document.body.clientWidth || window.outerWidth) /750; //2018年12月10日17:51:21改动 具体下面详解
 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的差别不大同样放的是

缩放大小。

注意：楼主今天发现了一个问题，在最新12版iOS自带的Safari浏览器中 window.outerWidth获取值为0，导致计算出来的缩放为0，导致transform: scale(0)结果就是页面显示白屏而且页面没报错
为了兼容起见已经将本文修改。谨慎点的同学可以单独将屏幕宽度提取出来作为一个单独的变量。如：
let deviceWidth = window.screen.width || document.documentElement.clientWidth || document.body.clientWidth || window.outerWidth
let _scale = deviceWidth/750;

 

以上代码亲测有效欢迎大家指点意见。不胜感激！

 

posted @ 2018-03-07 22:19  leung_blog  阅读(1526)  评论(5)  编辑  收藏  举报