pc端html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="robots" content="all">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="Tencent-CP">
<meta name="Copyright" content="Tencent">
<meta name="Description" content="">
<meta name="Keywords" content="">
<title>(标题)</title>
<link href="css/common.css" rel="stylesheet">
</head>
<body>
<div class="wrap"></div>
</body>
</html>
移动端html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gbk">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="author" content="Tencent-Dong">
<meta name="Copyright" content="Tencent">
<meta name="Description" content="">
<meta name="Keywords" content="">
<title></title>
</head>
<body>
<div class="wrap"></div>
<script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script>
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
var clientHeight = docEl.clientHeight;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
css模板
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1',tahoma,sans-serif} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0;display:block;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit} input,textarea,select{*font-size:100%} body,html{width: 6.4rem;-webkit-touch-callout: none;} input{-webkit-appearance:none;} input,button,select,textarea{outline:none} textarea{resize:none} a{text-decoration: none;} a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;} .pr {position:relative;} .pa {position:absolute;} .ov_hi{overflow: hidden;} .db {display:block;text-indent:-999em;} .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden} .clearfix{*zoom:1;} .flex{display: flex;-webkit-display: flex; } .flex-column{flex-direction: column;-webkit-flex-direction: column} .justify-content-center{-webkit-justify-content: center;justify-content: center;} .justify-content-space-between{-webkit-justify-content: space-between;justify-content: space-between;} .justify-content-space-around{-webkit-justify-content: space-around;justify-content: space-around;} .align-items-center{ -webkit-align-items: center;align-items: center;}