前端第一篇总结

前端第一篇博客

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}}