移动端css reset

个人比较反感那些有用无用的一大堆reset代码啪唧一下全部粘贴进去。看似全面,其实很多都是无用的代码。建议根据自己项目的实际需求做一些增删,简单而实用。

“`
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, del, em, img, strong,
sub, sup, dl, dt, dd, ol, ul, li, form, label, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
width: 100%;
}

html {
font-family: “Helvetica Neue”, Helvetica, STHeiTi, Arial, sans-serif, “Microsoft YaHei”, “微软雅黑”;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
height: 100%;
}

body {
margin: 0;
font-size: 1.4rem;
line-height: 1.5;
color: #333333;
background-color: white;
height: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
display: block;
}

img {
border: 0;
max-width: 100% !important;
vertical-align: middle;
}

address, caption, cite, code, i, em, strong{
font-weight: normal;
font-style: normal;
}

ol, ul {
list-style: none;
}

a {
background: transparent;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
color: #0088cc;
}

a:active {
outline: 0;
}
a:active {
color: #006699;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}

button, input, select, textarea {
margin: 0;
font: inherit;
color: inherit;
outline: none;
-webkit-appearance: none;
border-radius: 0;
}

  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}“`


参考

http://www.w3cplus.com/mobile/mobile-terminal-refactoring-reset-style.html

你可能感兴趣的:(前端,css)