本站有關於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) { }