media-queries - CSS 媒体查询（移动设备、平板电脑和屏幕）

Question

我正在努力成为一名响应式开发人员（而不是固定的开发人员）。最近我一直在尝试理解媒体查询并且有些困惑。测试很简单：

我想将手机的主体背景颜色更改为红色，平板电脑为黄色，宽屏为绿色。以下代码演示了这一点（大部分情况下）。我遇到的问题是当宽度低于 480 像素（30 em）时，背景会恢复为默认值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; }
}