页面样式重置的问题,以及Normalize.css的使用

在不同的浏览器中,对于用户未指定样式的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了٩(๑❛ᴗ❛๑)۶

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容