码迷,mamicode.com
首页 > 移动开发 > 详细

移动端网站通用模板 单位rem

时间:2017-07-15 10:01:57      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:max   microsoft   play   size   移动端   element   minimum   sid   summary   

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="pragma" content="no-cache" />
<meta name="format-detection" content="telephone=no" /> <!-- 忽略页面中的数字识别为电话号码 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- winphone去掉点击效果 -->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/conmon.js"></script>
<title>首页</title>
</head>
<body>
<img id="index-bg" src="img/index.png"/>
<header>头 </header>
         <section>

    //内容区域
         </section>


<footer>脚 </footer>
</body>
</html> 

 

css

 

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
font-family: ‘Microsoft Yahei‘,‘SimSun‘,‘Helvetica‘;
word-break:break-all;
font-size: 0.32rem;
width: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}

img{
border:0;
display:block;
}
li{
list-style:none
}
a {
text-decoration:none;
color:#000;
}
a:active{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input,button{
outline: none;
}

js

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = ‘100px‘;
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘;
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

 

移动端网站通用模板 单位rem

标签:max   microsoft   play   size   移动端   element   minimum   sid   summary   

原文地址:http://www.cnblogs.com/wanghuoya/p/7181372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!