<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手机端rem适配模板</title>
<script>
(function (doc, win) {
setRem();
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
setRem();
};
if (!doc.addEventListener)
return;
win.addEventListener(resizeEvt, recalc, false);
// doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
function setRem() {
var docEl = document.documentElement;
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
}
</script>
<style>
html {
font-size: 20px;
max- 640px;
min- 375px;
}
body {
padding: 0;
margin: 0;
}
ul, li, ol, input {
box-sizing: border-box;
}
input {
outline: none;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.container {
min-height: 100vh;
100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
}
header {
100%;
}
.content {
flex: 1;
100%;
}
footer {
100%;
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<div class="content">1</div>
<footer>footer</footer>
</div>
<script type="text/javascript">//JS监听浏览器文字大小代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>