资讯专栏INFORMATION COLUMN

PC和移动端的CSS重置样式表

wmui / 1544人阅读

摘要:自己一直在用并不断完善的重置样式表,直接放到项目里面可让浏览器样式基本统一,现分两个版本,针对不同平台作出优化。端地址移动端地址

自己一直在用并不断完善的重置样式表,直接放到项目里面可让浏览器样式基本统一,现分两个版本,针对不同平台作出优化。

PC端

</>复制代码

  1. html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  2. 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}
  3. li{list-style:none}
  4. article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
  5. audio,canvas,progress,video{display:inline-block}
  6. audio:not([controls]){display:none;height:0}
  7. [hidden],template{display:none}
  8. a{background-color:transparent;text-decoration:none}
  9. a:active,a:hover{outline:0}
  10. abbr[title]{border-bottom:1px dotted}
  11. b,strong{font-weight:bold}
  12. dfn{font-style:italic}
  13. h1{font-size:2em;margin:.67em 0}
  14. mark{background:#ff0;color:#000}
  15. small{font-size:80%}
  16. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  17. sup{top:-0.5em}
  18. sub{bottom:-0.25em}
  19. img{border:0}
  20. svg:not(:root){overflow:hidden}
  21. figure{margin:1em 40px}
  22. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  23. pre{overflow:auto}
  24. code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
  25. button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:none;line-height:normal}
  26. button{overflow:visible}
  27. button,select{text-transform:none}
  28. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  29. button[disabled],html input[disabled]{cursor:default}
  30. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  31. input{line-height:normal}
  32. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  33. input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
  34. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  35. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  36. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  37. legend{border:0;padding:0}
  38. textarea{overflow:auto}
  39. optgroup{font-weight:bold}
  40. table{border-collapse:collapse;border-spacing:0}
  41. td,th{padding:0}

CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/pc/reset.min.css

移动端

</>复制代码

  1. html{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  2. html,body{-webkit-user-select:none;user-select:none;}
  3. 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}
  4. a{text-decoration:none;-webkit-touch-callout:none;background-color:transparent}
  5. li{list-style:none}
  6. article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
  7. audio,canvas,progress,video{display:inline-block}
  8. audio:not([controls]){display:none;height:0}
  9. [hidden],template{display:none}
  10. a:active,a:hover{outline:0}
  11. abbr[title]{border-bottom:1px dotted}
  12. b,strong{font-weight:bold}
  13. dfn{font-style:italic}
  14. h1{font-size:2em;margin:.67em 0}
  15. small{font-size:80%}
  16. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  17. sup{top:-0.5em}
  18. sub{bottom:-0.25em}
  19. img{border:0;-webkit-touch-callout:none;}
  20. svg:not(:root){overflow:hidden}
  21. figure{margin:1em 40px}
  22. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  23. pre{overflow:auto}
  24. code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
  25. a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);}
  26. button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;-webkit-appearance:none;outline:none;line-height:normal}
  27. button{overflow:visible}
  28. button,select{text-transform:none}
  29. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  30. button[disabled],html input[disabled]{cursor:default}
  31. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  32. input{line-height:normal}
  33. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  34. input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
  35. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  36. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  37. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  38. legend{border:0;padding:0}
  39. textarea{overflow:auto}
  40. optgroup{font-weight:bold}
  41. table{border-collapse:collapse;border-spacing:0}
  42. td,th{padding:0}

CDN地址:http://cdn.ccwebsite.com/reset-css/1.2.2/mobile/reset.min.css

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115018.html

相关文章

  • 浅谈pc移动端的响应式

    摘要:浅谈和移动端的响应式身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题下面我们来说一下响应式跟自适应有什么区别有些人可能还不知道响应式跟自适应的区别甚至认为他们是同一个东西其实不是的自适应是最早出现的,后面才有了响应式。 浅谈pc和移动端的响应式 身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自...

    Soarkey 评论0 收藏0
  • 浅谈pc移动端的响应式

    摘要:浅谈和移动端的响应式身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题下面我们来说一下响应式跟自适应有什么区别有些人可能还不知道响应式跟自适应的区别甚至认为他们是同一个东西其实不是的自适应是最早出现的,后面才有了响应式。 浅谈pc和移动端的响应式 身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自...

    princekin 评论0 收藏0
  • 浅谈pc移动端的响应式

    摘要:浅谈和移动端的响应式身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题下面我们来说一下响应式跟自适应有什么区别有些人可能还不知道响应式跟自适应的区别甚至认为他们是同一个东西其实不是的自适应是最早出现的,后面才有了响应式。 浅谈pc和移动端的响应式 身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自...

    iamyoung001 评论0 收藏0
  • 浅谈pc移动端的响应式

    摘要:响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。如下图所示,对于同一个页面图中的,如果用响应式布局来处理的话,用不同设备电脑平板手机去访问此页面,最后看到的布局和内容有很大不同。身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<