移动端的手机自适应的代码网上很多，昨天室友问我，有一些具体的好像有点不准确 然和我找了下资料和自己以前写过的整理了下分享下。下面是我测试的代码
---------------------------------------------------------------------------------------------------------------------------------
// 华丽的分割线
----------------------------------------------------------------------------------------------------------------------------------
<!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的；
我也分别用了其他的屏幕大小作了比较，可以清楚的看到效果。
扫一扫
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
