H5适配方式
首先将如下代码 放置于<title>标签下面,当然你的自定义样式,在这之后引入即可,
然后你就可以使用和设计稿一样的px进行H5 布局,上手很easy再也不用什么rem了
<style type="text/css">
html {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
(function() {
// var wr = window.innerWidth / window.innerHeight;
var bcr = window.document.documentElement.getBoundingClientRect();
var wr = bcr.width / bcr.height;
var _width;
if (wr > 750 / 1106) {
_width = Math.floor(wr * 1106);
} else {
_width = 750;
}
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=' + _width + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
} else {
document.write('<meta name="viewport" content="width=' + _width + ',target-densitydpi=device-dpi">')
}
} else if (/QQAC_Client_iOS/.test(ua)) {
document.write('<meta name="viewport" content="width=' + _width + ',maximum-scale=0.5,minimum-scale=0.5">');
} else {
document.write('<meta name="viewport" content="width=' + _width + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
}
var domEle = window.document.documentElement;
var timeCode;
var hwr = wr > 1 ? wr : (1 / wr)
domEle.style.height = hwr * _width + "px";
console.log(hwr * _width + "px")
function resize() {
domEle.style.height = hwr * _width + "px";
}
window.addEventListener("resize", function() {
clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
}, false);
window.addEventListener("pageshow", function(b) {
b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
}, false);
resize();
})();
</script>