Create a media queries template code fragment using EM

Article Introduction: Create a CSS3 media Queries using the EM unit.

This site has a lot of relevant tutorials about CSS3 media queries, to say the least, is to use media queries to make Responsiv desgin. Now a popular foreign design is called responsive Design (domestic called response-style), where the key to this layout is that the media queries can not be matched, as early as in the "CSS3 media queries template " A text to introduce the commonly used templates, but there are many comments and forums that use PX for the unit write response layout, will cause breakpoints, then today to everyone to use the "em" unit media queries template code fragment:

/* ===== = = = = = 20em (320px) = = = = = =====/@media only screen and  (min-width:20em) {  }/   * ===== = = = = = 30em (480px) = = = = = = =====/@media only screen and  (min-width:30em) {}/* ===== = = = =   37.5em (600p x = = = = = = = = = = = = = = = = = = = = = = = = = = = =====/@media only screen and  (min-width:37.5em) {  } * ===== = = =   48em = =  /@media only screen and (Min-width:48em) {}/* ===== = = = = = =  56.25em (900px) = = = = = = =   ===== */
   @media only screen and (min-width:56.25em) {}/* ===== = = = = = 68.75em (1100px) = = = = = =   =====/  @me Dia only screens and (min-width:68.75em) {  } * ===== = = = =   81.25em (1300px) = = = = = = =====/  @media o nly screen and (min-width:81.25em) {