CSS中适配手机和电脑的布局

屏幕大于或等于100px，上面的两个媒体查询将使主体字体粗体，如果大于或等于200px，也使颜色#555;

另一个例子：

@media screen and (max-width:100px) {
    body { font-weight:bold; }
}

@media screen and (max-width:200px) {
    body { color:#555; }
}

与第一个示例不同，只有屏幕宽度在0到100像素之间时，才会使正文字体加粗，并使颜色#555。如果它在0px和200px之间，它将是颜色#555。

媒体查询的优点是，您可以组合这些语句：

@media screen and (min-width:100px) and (max-width:200px) {
    body { font-weight:bold; color:#555; }
}

参考来源：http://www.viiis.cn/news/show_67112.html