使用em建立Media Queries模板程式碼片段

文章簡介：使用em單位建立CSS3的Media Queries.

本站有關於CSS3的Media Queries的相關教程有不少，說直一點，就是使用Media Queries來製作Responsiv Desgin。現在國外流行的一種設計叫Responsive Design(國內稱為響應式設計)，其中這種布局關鍵之處就是不能少了Media Queries的配合，早在《CSS3 Media Queries模板》一文中就給大家介紹了常用的模板，但有很多評論和論壇中說使用px為單位寫響應式布局，會造成斷點，那麼今天給大家貼上一段使用“em”為單位的Media Queries模板程式碼片段：

/* ===== == = === 20em (320px) === = == ===== */  @media only screen and (min-width : 20em) {  }   /* ===== == = === 30em (480px) === = == ===== */  @media only screen and (min-width : 30em) {  }   /* ===== == = === 37.5em (600px) === = == ===== */  @media only screen and (min-width: 37.5em) {  }   /* ===== == = === 48em (768px) === = == ===== */  @media only screen and (min-width : 48em) {  }   /* ===== == = === 56.25em (900px) === = == ===== */  @media only screen and (min-width : 56.25em) {  }   /* ===== == = === 68.75em (1100px) === = == ===== */  @media only screen and (min-width : 68.75em) {  }   /* ===== == = === 81.25em (1300px) === = == ===== */  @media only screen and (min-width : 81.25em) {  }