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

缩放大小。

您可能感兴趣的

New in Symfony 4.1: HTML5 Email Validation Contributed by Billie Thompson in #24442 . Symfony 4.1 will be released in May 2018. This is the first article of the series that s...
Next Generation Ubuntu Linux Installer Could Use H... Development kicked off on the next Ubuntu release, the Ubuntu 18.10 (Cosmic Cuttlefish), and it looks like one of its major new features could be a...
Multimedia requests for a mobile HTML5 application I've basically gone mad trying to figure/google it out. iOS device are not an issue since there aren't so many and its easy to set for every single...
基于 HTML5 WebGL 的 3D 工控裙房系统 前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯、IT企业的布局;一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商。什么叫做裙房?裙房...
用HTML5 Geolocation实现一个距离追踪器 HTML5 Geolocation(地理定位)用于定位用户的位置。那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示到页面,这样就简单实现了一个距离追踪器,为了用户更清楚地看到当前位置,这里接入了百度地图API。 ...
博客园-原创精华区责编内容来自:博客园-原创精华区 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » px单位html5响应式方案



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录