在不同的浏览器中，对于用户未指定样式的dom元素，浏览器都会赋予它一个默认样式。但是在不同浏览器中有可能一些默认样式是不一样的。
为了使页面美观，视觉效果尽量统一。我们通常都会将一些常用到的样式写到一个单独的样式文件里。在新开发的页面中引用该文件，可以省去不少时间，提高开发效率（其实就是懒）。
贴一下目前我们正在用的代码：
html{font-size:12px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:14px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:15px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:16px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:17px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:18px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:19px}}
@media screen and (min-width:800px) and (max-width:1000px){html{font-size:20px}}
@media screen and (min-width:1001px){html{font-size:22px}}
html{-ms-touch-action:none;-webkit-text-size-adjust:none}
article,blockquote,body,dd,dir,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,img,input,legend,li,menu,nav,ol,p,section,span,td,textarea,th,ul{margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent}
body{-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{font:1rem/1.5 \5b8b\4f53,Arial,Verdana}
h1,h2,h3,h4,h5,h6,th{font-size:100%;font-weight:400}
q:after,q:before{content:''}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:.65rem}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000;display:none}
img{border:0}
button,input,select,textarea{vertical-align:middle;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
textarea{overflow:auto}
a{text-decoration:none}
.clearfix:after,.clearfix:before{content:"";display:table}
.clearfix:after{clear:both}
.fl{float:left}
.fr{float:right}
.tal{text-align:left}
.tar{text-align:right}
.tac{text-align:center}
.pa{position:absolute}
.pr{position:relative}
.pf{position:fixed}
.hide{display:none}
:focus{outline:0 none}
.hand,a{cursor:pointer}
.vam{vertical-align:middle}
:not(input){-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}
因为公司产品大部分都涉及移动端，所以上述代码中主要对移动端进行了一些适配。比如调整了各种屏幕下的字体、取消了默认的按住高亮效果等。
实际情况下，你可以不必要用和我上面一模一样的代码，其实只要代码够满足符合自己的业务就可以了。
这里推荐一下开源项目：Normalize.css
目前版本代码如下（v8.0.1压缩后）：
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%;}
body{margin:0;}
main{display:block;}
h1{margin:.67em 0;font-size:2em;}
hr{overflow:visible;box-sizing:content-box;height:0;}
pre{font-size:1em;font-family:monospace,monospace;}
a{background-color:transparent;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,strong{font-weight:bolder;}
code,kbd,samp{font-size:1em;font-family:monospace,monospace;}
small{font-size:80%;}
sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}
sub{bottom:-.25em;}
sup{top:-.5em;}
img{border-style:none;}
button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1.15;}
button,input{overflow:visible;}
button,select{text-transform:none;}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText;}
fieldset{padding:.35em .75em .625em;}
legend{display:table;box-sizing:border-box;padding:0;max-width:100%;color:inherit;white-space:normal;}
progress{vertical-align:baseline;}
textarea{overflow:auto;}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}
[type=search]{outline-offset:-2px;-webkit-appearance:textfield;}
[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}
details{display:block;}
summary{display:list-item;}
template{display:none;}
[hidden]{display:none;}
我看了一下源码，应该目前大部分页面是可以用的，如果自己的业务有特殊需要的话，在上面改改就ok了٩(๑❛ᴗ❛๑)۶
网友评论