您的位置：首页 > Web前端 > HTML5

h5布局之道（最终篇）

2016-04-28 15:19 507 查看

大家好，时隔一年多了，前几篇探讨的rem布局后来又有改进不过一直没有想起来更新博客，rem布局淘宝用的也比较早，有兴趣的可以看看淘宝的flexible

,我的用法比较简单，原来一样，废话不说了直接上代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<title>GreatBoy</title>
<style>
/*-----css Reset end-----*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
margin:0;
padding:0px;
}
html{
/*                display: none;*/
}
body{
font-size: 14px;
}
.nav img{
width: 100%;
}
</style>
</head>
<body>
<div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div>
<div id="container">
<div id="user">用户信息<span id="userinfo"></span></div>
</div>
<script>
(function(win) {
var doc = win.document,
scale = 16,
$body = doc.getElementsByTagName('body')[0],
$html = doc.getElementsByTagName('html')[0],
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,
windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
deviceAgent = navigator.userAgent.toLowerCase();
if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {
try{
// if ( window.localStorage && window.localStorage.getItem('scale_greatboy') ) {
//    scale = window.localStorage.getItem('scale_greatboy');
// } else {
scale = parseFloat(windowWidth * 16 / (16*3.2));
if (windowHeight > windowWidth) {
//window.localStorage && window.localStorage.setItem('scale_greatboy', scale);
}
// }
}catch(e){

}
if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
scale = 16;
}
$html.style.fontSize = scale + 'px';
$html.style.display = 'block';
} else {
window.onresize = function(){
windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth;
scale = parseFloat(windowWidth * 16 / (16*3.2));
$html.style.fontSize = scale + 'px';
};
scale = parseFloat(windowWidth * 16 / (16*3.2));
$html.style.fontSize = scale + 'px';
$html.style.display = 'block';
}
$body.style.width = '3.2rem';
})(window);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航