1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > H5页面自适应各种手机端屏幕分辨率的大小

H5页面自适应各种手机端屏幕分辨率的大小

时间:2018-11-15 15:22:58

相关推荐

H5页面自适应各种手机端屏幕分辨率的大小

之前写h5注册页的时候,总是适配不好,用过媒体查询,但是效果不太好,而且要适配的尺寸太多了,总归有遗漏的,时长达不到ui设计图的标准,后来在网上找了一篇适配的js代码,但是因为不太明白,所以使用的也不好哈哈,现在算是明白了点,故将代码放上 原文出处:/p/26ce1458df65

; (function (designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width > maxWidth && (width = maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;refreshRem();win.addEventListener("resize", function () {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function (e) {doc.body.style.fontSize = "16px";}, false);}})(1080, 1920);

最后有两个参数是需要手动调整的,分别是 设计稿的宽度和最大宽度,我这里设计稿的宽度是1080,然后给他设定的最大宽度是1920,设定好之后就可以随心所欲地使用rem了哈哈

比如说量的尺寸是距离顶部882px,我们可以这样写top:8.82rem,原尺寸除以100就可以了,这段代码要放在头部script标签的最前面

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。