移动端的手机自适应的代码网上很多，昨天室友问我，有一些具体的好像有点不准确 然和我找了下资料和自己以前写过的整理了下分享下。下面是我测试的代码
---------------------------------------------------------------------------------------------------------------------------------
// 华丽的分割线
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试手机自适应</title>
</head>
<style>
</style>
<script>
(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'
console.log(document.body.style.fontSize)
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
console.log(rem)
}
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))
</script>
<body>
<div style="width:5rem;height:5rem;">
<span style="font-size :1rem">
测试文字
</span>
</div>
<div style="width:187.5px;height:187.5px;">
</div>
</body>
</html>
如果以iphone6 的屏幕 1rem = 37.5px的；
我也分别用了其他的屏幕大小作了比较，可以清楚的看到效果。
扫一扫
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
