<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>移动端--rem案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
//仿淘宝 设置html基值
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});
/*
$(function(){
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 6.4 + 'px';
var $winW=$(window).width(),$winH=$(window).height(),$root=($winW/6.4).toFixed(0)+"px";
$("html").css("fontSize",$root);
})*/
</script>
<style>
*{margin:0;padding:0;}
html,body{
width:100%;
height:100%;
}
.container{
padding-top:.47rem;
width:9.38rem;
margin:0 auto;
}
h1{
font-size:48px;
color:#fcbe2a;
text-align:center;
margin-bottom:1.16rem;
}
h2{
padding-left:.44rem;
margin-bottom:1.06rem;
font-size:28px;
color:#ee620e;
}
ul,li{
list-style:none;
}
ul{
background:#808080;
}
li{
float:left;
width:2.84rem;
height:2.84rem;
line-height:2.84rem;
margin-right:.42rem;
text-align:center;
font-size:16px;
background:#00ff00;
}
li:last-child{
float:right;
margin:0;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content:".";
display:block;
visibility:hidden;
clear:both;
width:0;
height:0;
}
</style>
</head>
<body>
<div class="container">
<h1>我是大标题</h1>
<h2>我是二标题</h2>
<ul class="clearfix">
<li>模块1</li>
<li>模块2</li>
<li>模块3</li>
</ul>
</div>
</body>
<script>
</script>
</html>
