使用em创建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) {  } 

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索media
， em
， screen
， min-width
， 片段式加载
Queries
css3 mediaqueries.js、media queries、css3 mediaqueries、mediaqueries.js 下载、mediaqueries.js，以便于您获取更多的相关知识。