移动端 rem 适配解决 |
您所在的位置:网站首页 › web端适配 › 移动端 rem 适配解决 |
引入此 js 文件解决
使用语法 (px像素 / @baseSize) 要使用的像素 除于 变量@baseSize // 浏览器窗口的基准值 @baseSize: 37.5rem; span { color: #fff; margin-left: (6 / @baseSize); font-size: (12 / @baseSize); padding: (3 / @baseSize) (4 / @baseSize); background-color: rgb(142, 179, 235); border-radius: (25 / @baseSize); } 移动端 rem 适配 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document)) |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |