-
-
-
-
web移动端rem适配代码
在
<head>
中插入js代码<script> (function (docs, win) { var docEls = docs.documentElement, resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize', recalcs = function () { win.rem = docEls.getBoundingClientRect().width / 25; docEls.style.fontSize = win.rem + 'px'; }; setTimeout(recalcs,1) if (!docs.addEventListener) return; win.addEventListener(resizeEvts, recalcs, false); })(document, window); </script>
在全局样式表中插入css代码
<style> body,html{ margin: 0; padding: 0; font-family: -apple-system,Helvetica,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; background-color: #f6f7f9; height: 100%; max-width: 36rem; margin: 0 auto; position: relative; } </style>
- 在本代码下,最大宽度为36rem。元素的尺寸根据设计图的宽度换算即可。