pc和移动端默认样式重置
2017-07-14 16:59
417 查看
首先说一下,为何要用重置样式
除了省心之外,还有两个好处
1.方便设计师/程序员发挥
白纸的感觉确实好。各种margin,padding,border的为0。。。
2.便于发现前端代码的遗漏
用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset,浏览器会提供“勉强可以”的默认样式,很多人可能就发现不了或者会想“可能就这么设计的吧”,开发者即使意识到因为遗漏导致和设计稿不一致,出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”——由于破窗效应,这可能会导致越来越多的“凑合着吧”
参考:https://www.zhihu.com/question/23554164
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}
CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/pc/reset.min.css
移动端
CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/mobile/reset.min.css
除了省心之外,还有两个好处
1.方便设计师/程序员发挥
白纸的感觉确实好。各种margin,padding,border的为0。。。
2.便于发现前端代码的遗漏
用了reset后,如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”,会非常扎眼(任何人都看得出来),开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没reset,浏览器会提供“勉强可以”的默认样式,很多人可能就发现不了或者会想“可能就这么设计的吧”,开发者即使意识到因为遗漏导致和设计稿不一致,出于人性弱点也可能会想“还要赶下一个项目呢先这么凑合着吧”——由于破窗效应,这可能会导致越来越多的“凑合着吧”
参考:https://www.zhihu.com/question/23554164
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}
CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/pc/reset.min.css
移动端
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}
CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/mobile/reset.min.css
相关文章推荐
- 移动端页面默认样式重置
- 移动端(web app)默认样式重置汇总
- 移动端重置浏览器默认样式代码
- 移动端页面默认样式重置
- 移动端页面默认样式重置
- 移动端页面默认样式重置
- 移动端页面默认样式重置
- 针对常用移动端H5页面CSS 样式控制。禁用页面文本复制、禁用系统默认菜单、禁止链接点击高亮的处理。。。。
- 重置默认样式
- 伪元素表单控件默认样式重置与自定义大全
- 用reset.css重置浏览器默认样式的重要性
- 重置默认样式 css reset第1/2页
- css初始化样式(重置默认样式)
- 移动端小结_meta设置与移动端页面样式重置
- 富文本样式在pc和移动端的差异
- 常用的默认样式重置
- html重置默认样式代码
- 使用Normalize.css重置默认样式
- 关于select样式重置和移动端网页添加meta标签的问题
- select默认样式美化代码兼容移动端和pc端