Media Query Key Code

The code inside the head

<name= "Viewport"  content= "Width=device-width, initial-scale=1"  >

Media queries adapt to different screen codes

1 / * Style only executed under PC * /2 @media screen and (min-width:992px) {3 H1 {4 font-size:36px;5 margin:30px 0 10px 0;6     }7 . Box {8 border:1px solid #a33;9 color: #a33;Ten background-color: #fee; One margin:10px; A padding:10px; -     } - } the / * style only performed under pad * / - @media screen and (min-width:768px) and (max-width:992px) { - H1 { - font-size:28px; + margin:20px 0 10px 0; -     } + . Box { A border:1px solid #3a3; at color: #3a3; - background-color: #efe; - margin:10px; - padding:10px; -     } - } in / * Style only executed under phone * / - @media screen and (max-width:767px) { to H1 { + /*font-size:28px; - margin:20px 0 10px 0;*/ the Display:none; *     } $ . Box {Panax Notoginseng border:1px solid #33a; - color: #33a; the background-color: #eef; + margin:10px; A padding:10px; the     } +}

Media Query Key Code