pc端和移动端默认样式重置

匿名 (未验证) 提交于 2019-12-03 00:22:01

首先说一下,为何要用重置样式

除了省心之外,还有两个好处

1.方便设计师/程序员发挥

白纸的感觉确实好。各种margin,padding,border的为0。。。

2.便于发现前端代码的遗漏

用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset,浏览器会提供“勉强可以”的默认样式,很多人可能就发现不了或者会想“可能就这么设计的吧”,开发者即使意识到因为遗漏导致和设计稿不一致,出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”――由于破窗效应,这可能会导致越来越多的“凑合着吧”

pc端:

    html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}       html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline}       li{list-style:none}       article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}       audio,canvas,progress,video{display:inline-block}       audio:not([controls]){display:none;height:0}       [hidden],template{display:none}       a{background-color:transparent;text-decoration:none}       a:active,a:hover{outline:0}       abbr[title]{border-bottom:1px dotted}       b,strong{font-weight:bold}       dfn{font-style:italic}       h1{font-size:2em;margin:.67em 0}       mark{background:#ff0;color:#000}       small{font-size:80%}       sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}       sup{top:-0.5em}       sub{bottom:-0.25em}       img{border:0}       svg:not(:root){overflow:hidden}       figure{margin:1em 40px}       hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}       pre{overflow:auto}       code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}       button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:none;line-height:normal}       button{overflow:visible}       button,select{text-transform:none}       button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}       button[disabled],html input[disabled]{cursor:default}       button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}       input{line-height:normal}       input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}       input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}       input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}       input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}       fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}       legend{border:0;padding:0}       textarea{overflow:auto}       optgroup{font-weight:bold}       table{border-collapse:collapse;border-spacing:0}       td,th{padding:0}  

移动端:

    html{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}       html,body{-webkit-user-select:none;user-select:none;}       html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline}       a{text-decoration:none;-webkit-touch-callout:none;background-color:transparent}       li{list-style:none}       article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}       audio,canvas,progress,video{display:inline-block}       audio:not([controls]){display:none;height:0}       [hidden],template{display:none}       a:active,a:hover{outline:0}       abbr[title]{border-bottom:1px dotted}       b,strong{font-weight:bold}       dfn{font-style:italic}       h1{font-size:2em;margin:.67em 0}       small{font-size:80%}       sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}       sup{top:-0.5em}       sub{bottom:-0.25em}       img{border:0;-webkit-touch-callout:none;}       svg:not(:root){overflow:hidden}       figure{margin:1em 40px}       hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}       pre{overflow:auto}       code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}       a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);}       button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;-webkit-appearance:none;outline:none;line-height:normal}       button{overflow:visible}       button,select{text-transform:none}       button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}       button[disabled],html input[disabled]{cursor:default}       button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}       input{line-height:normal}       input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}       input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}       input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}       input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}       fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}       legend{border:0;padding:0}       textarea{overflow:auto}       optgroup{font-weight:bold}       table{border-collapse:collapse;border-spacing:0}       td,th{padding:0}  


如有不足请多多指教!希望给您带来帮助!

参考文献:https://blog.csdn.net/jiang_my/article/details/75125781

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!