Question

我的目标是在iphone或类似的移动设备中加载页面时将类notice-bar的div的背景设置为红色。

这是我的less文件：

@mandy: #ff0000;

// extra small
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);

.hidden {
    display: none;
}

// This does not work too
// .active .content .notice-bar {
//    background: @mandy;
// }

.active .content {
  @media (max-width: @screen-xs-max) {
    background: @mandy;
    .header {
      display: none;
    }
    .notice-bar {
      display: block;
    }
    .view-switcher a {
      color: white;
    }
  }

}

这是我的html文件

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="content active">
        <div class="header notice-bar">
            Expect to be red background
        </div>
         <div class="header header-text">
            Expect to be hidden
        </div>
        <div class="hidden">
            Hidden
        </div>
    </div>
</body>
</html>

我希望类header notice-bar的div在iPhone或其他类似智能手机中查看时会有红色背景颜色，但事实并非如此。实际上，即使我明确地设置它，它也不会工作。

.active .content .notice-bar {
    background: @mandy;
}

我错过了什么？

修改

我按照@ Vucko的建议，我可以看到镀铬的红色背景。但是我仍然无法在移动野生动物园中看到同样的效果。这是新的less代码

   .active.content {
      @media (max-width: @screen-xs-max) {

以下是截屏

Works in chrome

Does not work in mobile safari

我的主要目的是让less代码与 media规范一起使用。

Answer 1

两件事：

确保声明html5 doctype并使用html标签封装您的body标签
您需要正确的CSS来调用标题并将其设置为红色（您未正确定义复合类）：

.header.notice-bar {background：@mandy;}

Codepen在这里为您结账：http://goo.gl/WlCcUx，

Answer 2

你的LESS / CSS有效，你只有错误的选择器。

.active .content .notice-bar{}

表示您定位.content .active的孩子{/ 1}}。

要定位<div class="content active">，您必须加入这两个类，例如

.active.content{} /* notice there is no space bewteen active and content*/

＆＃13;

.content .active .notice-bar{
  background: red;
}

.content.active .notice-bar{
  background: blue;
}

＆＃13;

<div class="content">
  <div class="active">
    <div class="notice-bar">
      .active is the child of .content
    </div>
  </div>
</div>

<div class="content active">
  <div class="notice-bar">
      parent has two classes
  </div>
</div>

＆＃13;

另外，要使其在移动设备上运行，您必须为移动视口添加meta标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML5 boilerplate documentation中有关于此的更多信息。

为什么这个较少的规范无法将背景应用于div？

2 个答案: