手机样板 HTML
<!DOCTYPE html>
<html>
<head>
<script src="base.js"></script>
<style>
body{
max-width: 750px;
margin: 0 auto;
height: 100%;
overflow: hidden;
overflow-y: auto;
background: #f2f2f2;
}
/*header*/
header{
position: fixed;
width: 100%;
max-width: 750px;
top: 0;
left: auto;
z-index: 999;
height: 0.9rem;
background: #f00;
}
/*页面主体*/
main{
padding-top: 0.9rem;
background: #0FB25F;
}
/*页面脚部*/
footer{
z-index: 999;
position: fixed;
width: 100%;
max-width: 750px;
bottom: 0;
left:auto;
height: 0.9rem;
background: #f00;
border-top: 1px solid #ddd;
}
h3{
color: #fff;
}
/********************************************************
/* 以下是各个设备自适应样式，如果页面过多，建议放到 base.css 中
*/
/*平板 宽屏 自适应*/
@media only screen and (max-width: 1024px){
/*使用移动终端时的样式设定*/
body{
max-width: 100%!important;
}
header{
max-width: 100%!important;
}
footer{
max-width: 100%!important;
}
}
@media only screen and (min-width: 1024px){
/*使用PC终端时的样式设定*/
body{
margin: 0 auto!important;
}
}
a{
text-decoration: none!important;
}
input,button{
outline: none!important;
}
</style>
</head>
<body>
<header>
<h3>我是页面头部</h3>
</header>
<main>
<h3>我是页面主体</h3>
</main>
<footer>
<h3>我是页面脚部</h3>
</footer>
</body>
</html>
(function () {
function resize() {
var root = document.documentElement;
var w = root.getBoundingClientRect().width;
var PC = IsPC();
if (PC){
root.style.fontSize = '100px';
}else {
if (w > 750 && w !== 1024) {
w = 750
}
var fontSize = w / 7.5 + "px"; /*设计稿是750*/
root.style.fontSize = fontSize;
}
}
resize();
var t;
window.addEventListener("resize", function () {
clearTimeout(t);
t = setTimeout(resize, 300);
})
//判断是否是 PC 端
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
})();