添加 Viewport Meta 元素

Viewportmeta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度,请将下面一行加入

<meta name="viewport" content="width=device-width, initial-scale=1">

基础

所有模块都是基于Normalize.css构建的。它是我们的基础层,一定程度上保证了跨浏览器的一致性。 您可以使用下面cdn引用她,或者直接复制她。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />  

代码

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */  
html {  
    line-height: 1.15;  
    -ms-text-size-adjust: 100%;  
    -webkit-text-size-adjust: 100%  
}  
body {  
    margin: 0  
}  
  
article,  
aside,  
footer,  
header,  
nav,  
section {  
    display: block  
}  
  
h1 {  
    font-size: 2em;  
    margin: .67em 0  
}  
figcaption,  
figure,  
main {  
    display: block  
}  
  
figure {  
    margin: 1em 40px  
}  
  
hr {  
    box-sizing: content-box;  
    height: 0;  
    overflow: visible  
}  
  
pre {  
    font-family: monospace, monospace;  
    font-size: 1em  
}  
  
a {  
    background-color: transparent;  
    -webkit-text-decoration-skip: objects  
}  
b,  
strong {  
    font-weight: inherit  
    font-weight: bolder  
}  
  
small {  
    font-size: 80%  
}  
  
audio,  
video {  
    display: inline-block  
}  
audio:not([controls]) {  
    display: none;  
    height: 0  
}  
  
img {  
    border-style: none  
}  
  
svg:not(:root) {  
    overflow: hidden  
}  
  
button,  
input,  
optgroup,  
select,  
textarea {  
    font-family: sans-serif;  
    font-size: 100%;  
    line-height: 1.15;  
    margin: 0  
}  
button,  
input {  
    overflow: visible  
}  
button,  
select {  
    text-transform: none  
}  
  
[type=reset],  
[type=submit],  
button,  
html [type=button] {  
    -webkit-appearance: button  
}  
  
[type=button]::-moz-focus-inner,  
[type=reset]::-moz-focus-inner,  
[type=submit]::-moz-focus-inner,  
button::-moz-focus-inner {  
    border-style: none;  
    padding: 0  
}  
  
[type=button]:-moz-focusring,  
[type=reset]:-moz-focusring,  
[type=submit]:-moz-focusring,  
button:-moz-focusring {  
    outline: 1px dotted ButtonText  
}  
  
fieldset {  
    padding: .35em .75em .625em  
}  
  
legend {  
    box-sizing: border-box;  
    color: inherit;  
    display: table;  
    max-width: 100%;  
    padding: 0;  
    white-space: normal  
}  
  
progress {  
    display: inline-block;  
    vertical-align: baseline  
}  
  
textarea {  
    overflow: auto  
}  
  
[type=checkbox],  
[type=radio] {  
    box-sizing: border-box;  
    padding: 0  
}  
  
[type=number]::-webkit-inner-spin-button,  
[type=number]::-webkit-outer-spin-button {  
    height: auto  
}  
  
[type=search] {  
    -webkit-appearance: textfield;  
    outline-offset: -2px  
}  
  
[type=search]::-webkit-search-cancel-button,  
[type=search]::-webkit-search-decoration {  
    -webkit-appearance: none  
}  
  
::-webkit-file-upload-button {  
    -webkit-appearance: button;  
    font: inherit  
}  
  
details,  
menu {  
    display: block  
}  
  
summary {  
    display: list-item  
}  
  
canvas {  
    display: inline-block  
}  
  
[hidden] {  
    display: none  
}