使用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) {

}

同时附上本站有关于Media Queries和Responsive Design的相关教程：

1. CSS3 Media Queries
2. CSS3 Media Queries模板
3. CSS3 Media Queries在iPhone4和iPad上的运用
4. CSS3 Media Queries案例——Tee Gallery
5. CSS3 Media Queries案例——A List Apart
6. CSS3 Media Queries案例——Hicksdesign
7. Responsive设计和CSS3 Media Queries的结合
8. 了解Responsive网页设计的三个特性
9. Responsive设计的关键三步
10. 手机上网站导航的制作
11. 37个极具创意的响应式布局网站

如需转载，烦请注明出处：http://www.w3cplus.com/codes/Media-Queries-Using-EMs.html