CSS媒体查询（移动设备，平板电脑和屏幕）

Question

我正努力成为响应式开发者（而不是固定的）。我一直试图了解媒体查询，并且有些困惑。测试很简单：

我想将身体背景颜色更改为红色表示移动设备，黄色表示平板电脑，绿色表示宽屏幕。以下代码演示了这一点（大部分内容）。我遇到的问题是当宽度低于480px（30em）时，背景将恢复为默认值css（背景变为红色至白色）。现在..，我的小脑袋告诉我“哦，我只会做一个

     @media only screen and (min-width:1em) { body { background:red;} } 

......这将解决问题！“

然而，这似乎是错误的和不直观的。有谁知道实现这个简单任务的正确方法？

/*
==========================================================================
 MOBILE (min-width 480px)
========================================================================== */
   @media only screen and (min-width: 30em) {

    body { background:red; font-size:.75em; }

}


/* 
==========================================================================
 TABLETS (min-width 768px)
========================================================================== */
@media only screen and (min-width: 48em) {

body { background:yellow;  font-size:.85em; }

}

/* 
==========================================================================
 SCREENS (min-width 1140px)
========================================================================== */
@media only screen and (min-width: 71.25em) {

body { background:green;  font-size:1em; }

}

Answer 1

如果我是你，我会将整个CSS恢复为max-width。像max-width: XX这样的智能手机，max-width: YY是平板电脑，其他是屏幕。所以，它会变成这样的东西：

body { background:green;  font-size:1em; }  

@media only screen and (max-width: 71.25em) {
  body { background:yellow;  font-size:.85em; }
}

@media only screen and (max-width: 48em) {
  body { background:red; font-size:.75em; }
}