在基础CSS中为移动视图应用全局CSS值

Question

我正在使用基础css 5来构建一个web应用程序，它在平板电脑和桌面视图中工作完美。但是在移动视图中，它无法捕捉到我手动定义的CSS属性。

我检查了媒体查询，看到移动视图的CSS是在@media only screen { }

如果我想添加相同的属性到移动视图，我需要在@media only screen {}中添加下面的代码吗?

.mentoring-bg-color {
    background-color: #003B5D;
    color: #C9C9C7;
}

以上内容适用于桌面和平板电脑视图或大中型视图

Answer 1

根据Foundation 5 media Queries

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { 
   .mentoring-bg-color {
      background-color: #003B5D;
      color: #C9C9C7;
   }
}

css mentoring-bg-color仅适用于移动视图