响应式网站通用css

/* core.css v1.1 | MIT License | corecss.io */
html {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body, header, footer, main, section, div,
h1, h2, h3, h4, h5, h6, p, span, a,
blockquote, q, pre, code, ol, ul, li,
form, label, input, textarea, button,
table, tr, th, td, dl, dt, dd, hr {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: inherit;
    vertical-align: baseline;
    background: transparent;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
    display: block;
}
ol, ul {
    list-style: none;
}
hr {
    border-bottom: 1px solid #000;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}
a, a:hover {
    color: #000;
    text-decoration: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
[type='color'],
[type='date'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 1px solid #000;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}
::-webkit-input-placeholder {color: #777;}
:-moz-placeholder {color: #777;}
::-moz-placeholder {color: #777; opacity: 1;}
:-ms-input-placeholder {color: #777;}
[type='reset'],
[type='submit'],
[type='button'],
button {
    border: 1px solid #000;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
:focus {
    outline: none;
}
table {
    width: 100%;
}
table, tr, th, td {
    border: 1px solid #000;
    border-collapse: collapse;
    border-spacing: 0;
}
.row {margin: 0 auto;}
.row:before, .row:after {content: ''; display: table;}
.row:after {clear: both;}
.xs {max-width: 32rem;}
.sm {max-width: 48rem;}
.md {max-width: 64rem;}
.lg {max-width: 80rem;}
.xl {max-width: 96rem;}
.col {float: left;}
.xs-0 {display: none;}
.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12 {display: inline-block;}
.xs-1  {width: 8.3333%;}
.xs-2  {width: 16.6667%;}
.xs-3  {width: 25%;}
.xs-4  {width: 33.3333%;}
.xs-5  {width: 41.6667%;}
.xs-6  {width: 50%;}
.xs-7  {width: 58.3333%;}
.xs-8  {width: 66.6667%;}
.xs-9  {width: 75%;}
.xs-10 {width: 83.3333%;}
.xs-11 {width: 91.6667%;}
.xs-12 {width: 100%;}
@media screen and (min-width: 32em) {
    .sm-0 {display: none;}
    .sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12 {display: inline-block;}
    .sm-1  {width: 8.3333%;}
    .sm-2  {width: 16.6667%;}
    .sm-3  {width: 25%;}
    .sm-4  {width: 33.3333%;}
    .sm-5  {width: 41.6667%;}
    .sm-6  {width: 50%;}
    .sm-7  {width: 58.3333%;}
    .sm-8  {width: 66.6667%;}
    .sm-9  {width: 75%;}
    .sm-10 {width: 83.3333%;}
    .sm-11 {width: 91.6667%;}
    .sm-12 {width: 100%;}
}
@media screen and (min-width: 48em) {
    .md-0 {display: none;}
    .md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12 {display: inline-block;}
    .md-1  {width: 8.3333%;}
    .md-2  {width: 16.6667%;}
    .md-3  {width: 25%;}
    .md-4  {width: 33.3333%;}
    .md-5  {width: 41.6667%;}
    .md-6  {width: 50%;}
    .md-7  {width: 58.3333%;}
    .md-8  {width: 66.6667%;}
    .md-9  {width: 75%;}
    .md-10 {width: 83.3333%;}
    .md-11 {width: 91.6667%;}
    .md-12 {width: 100%;}
}
@media screen and (min-width: 64em) {
    .lg-0 {display: none;}
    .lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12 {display: inline-block;}
    .lg-1  {width: 8.3333%;}
    .lg-2  {width: 16.6667%;}
    .lg-3  {width: 25%;}
    .lg-4  {width: 33.3333%;}
    .lg-5  {width: 41.6667%;}
    .lg-6  {width: 50%;}
    .lg-7  {width: 58.3333%;}
    .lg-8  {width: 66.6667%;}
    .lg-9  {width: 75%;}
    .lg-10 {width: 83.3333%;}
    .lg-11 {width: 91.6667%;}
    .lg-12 {width: 100%;}
}
@media screen and (min-width: 80em) {
    .xl-0 {display: none;}
    .xl-1, .xl-2, .xl-3, .xl-4, .xl-5, .xl-6, .xl-7, .xl-8, .xl-9, .xl-10, .xl-11, .xl-12 {display: inline-block;}
    .xl-1  {width: 8.3333%;}
    .xl-2  {width: 16.6667%;}
    .xl-3  {width: 25%;}
    .xl-4  {width: 33.3333%;}
    .xl-5  {width: 41.6667%;}
    .xl-6  {width: 50%;}
    .xl-7  {width: 58.3333%;}
    .xl-8  {width: 66.6667%;}
    .xl-9  {width: 75%;}
    .xl-10 {width: 83.3333%;}
    .xl-11 {width: 91.6667%;}
    .xl-12 {width: 100%;}
}