前端第一篇博客
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
样式表顺序
<link rel="stylesheet" href="lib.css"/>
<link rel="stylesheet" href="siteCommon.css"/>
<link rel="stylesheet" href="curPageStyleSheets.css" />
<styles>
influenced styles reset
</styles>
scripts顺序
<script type="text/javascript" src="libs.js"></script>
<script type="text/javascript" src="pages.js"></script>
移动端js控制REM
(function (doc,win){
var docEl=doc.documentElement,
isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi),
dpr=isIOS?Math.min(win.devicePixelRatio,3):1,
dpr=window.top===window.self?dpr:1,
dpr=1,
scale=1/dpr,
resizeEvt='orienttationchange' in window ? 'orienttationchange':'resize';
docEl.dataset.dpr=win.devicePixleRatio;
if(navigator.userAgent.match(/iphone/gi)&&screen.width==375&&win.devicePixelRatio==2){
docEl.classList.add('iphone6/iphone6s/iphone7/iphone8')
}
if(navigator.userAgent.match(/iphone/gi)&&screen.width==414&&win.devicePixelRatio==2.6){
docEl.classList.add('iphone6p')
}
if(navigator.userAgent.match(/iphone/gi)&&screen.width==432&&win.devicePixelRatio==2.5){
docEl.classList.add('iphone6sPlus/iphone7Plus/iphone8Plus')
}
var metaEl=doc.createElement('meta');
metaEl.name='viewport';
metaEl.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc=function(){
var width=docEl.clientWidth;
if(width/dpr>720){
width=720*dpr;
}else if(width<320){
width=320;
}
docEl.style.fontSize=100*(width/720)+'px';
};
recalc();
if(!doc.addEventListener) return;
})(document,window);
mobile stylesheets
@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
display: block;
}
ol,
ul
{
list-style: none;
}
blockquote,
q
{
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after
{
content: '';
content: none;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
*{margin:0;padding:0;box-sizing:border-box;}
a,input,button{-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;}
input{-webkit-appearance:none;outline:none;}
input[type="checkbox"]{ background:transparent; border-color:transparent;}
html, body, button, input, select, textarea {font: 14px/1.5 arial,Microsoft YaHei,\5b8b\4f53;color: #333;}
@media screen and (min-width:240px){html,body,button,input,select,textarea{font-size:9px}}
@media screen and (min-width:320px){html,body,button,input,select,textarea{font-size:12px}}
@media screen and (min-width:360px){html,body,button,input,select,textarea{font-size:14px}}
@media screen and (min-width:400px){html,body,button,input,select,textarea{font-size:16px}}
@media screen and (min-width:450px){html,body,button,input,select,textarea{font-size:18px}}
@media screen and (min-width:480px){html,body,button,input,select,textarea{font-size:18px}}
@media screen and (min-width:540px){html,body,button,input,select,textarea{font-size:20.25px}}
@media screen and (min-width:600px){html,body,button,input,select,textarea{font-size:22px}}
@media screen and (min-width:640px){html,body,button,input,select,textarea{font-size:24px}}
@media screen and (min-width:720px){html,body,button,input,select,textarea{font-size:28px}}
@media screen and (min-width:800px){html,body,button,input,select,textarea{font-size:30px}}
@media screen and (min-width:880px){html,body,button,input,select,textarea{font-size:34px}}
@media screen and (min-width:960px){html,body,button,input,select,textarea{font-size:36px}}
@media screen and (min-width:1080px){html,body,button,input,select,textarea{font-size:40px}}
@media screen and (min-width:1440px){html,body,button,input,select,textarea{font-size:100px}}