px单位html5响应式方案

综合编程 2018-03-07

移动端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的差别不大同样放的是

缩放大小。

您可能感兴趣的

HTML5详解(一) 本文最初发表于 博客园 ,并在 GitHub 上持续更新 前端的系列文章 。欢迎在GitHub上关注我,一起入门和进阶前端。 以下是正文。 HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + J...
HTML5 data-*自定义属性简单介绍 我们可以使用data-作为前缀来设置我们所需要的自定义数据属性。 使用此属性可以存放一些我们所需要的数据,代码如下: < a href = "javascript:" data-url = ...
Build a HTML5 jigsaw puzzle game with ZIM framewor... Five years ago I blogged about a Jigsaw game prototype made with KineticJS which is no longer maintained. Some time later, a blog reader c...
HTML5 “2048” game made with Phaser 3 updated addin... Last week I showed you thePhaser 3 version of2048 game, using dynamic texts and keyboard control. I decided to remove dynamic texts to show tile v...
前端开发的客户端本地存储 在前端开发过程中,为了与服务器更方便的交互或者提升用户体验,我们都会在客户端(用户)本地保存一部分数据,比如 cookie/localStorage/sessionStorage 。在后端管理系统的前端,更是会涉及到一部分超大数据的请求,一个接口有时会达到5M甚至15M的程度,当这个接口数据...