前端第一篇总结

前端第一篇博客

meta标签

<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
/*This responsive base on 720px page*/
(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;
}
/* HTML5 display-role reset for older browsers */
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}}