M端模板
<!DOCTYPE html>
<html >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" >
<meta name ="format-detection" content ="telephone=no" >
<meta name ="apple-mobile-web-app-capable" content ="yes" >
<title > 网站标题,控制在25个字、50个字节以内</title >
<meta name ="keywords" content ="关键词,5个左右,单个8汉字以内" >
<meta name ="description" content ="网站描述,字数尽量空制在80个汉字,160个字符以内!" >
<link rel ="stylesheet" href ="css/reset.css" >
<link type ="text/css" rel ="stylesheet" media ="screen" href ="css/index.css" >
<script src ="js/common.js" charset ="utf-8" > </script >
</head >
<body >
<header > 网站头部</header >
<div > 内容部分</div >
<footer > 页脚</footer >
<script type ="text/javascript" src ="lib/zepto.min.js" > </script >
<script src ="js/index.js" > </script >
</body >
</html >
所有的PC页面都必须严格依照以上模板
所用到的公用的库、组件没有特殊情况以DEMO里的相应版本,保持版本一致性
关于M端需要注意的是我们采用rem动态布局,模板中lib/common.js就是动态的实现原理
同时我们需要根据设计图来做相应的参数修改,代码中第7行中的750是默认设计图的宽度,后续只需修改此处即可。
规则,1rem = 100px,即某一元素的宽或高是100px,用本模板则只需写1rem,这样即可做到动态布局!
(function (doc , win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth ) return
docEl.style.fontSize = 100 * (clientWidth / 750 ) + 'px'
docEl.getElementsByTagName("body" ) [0] .style.fontSize = docEl.style.fontSize
}
if (!doc.addEventListener ) return
win.addEventListener(resizeEvt , recalc, false )
doc.addEventListener('DOMContentLoaded' , recalc, false )
} ) (document , window)