Question

我在这里关注媒体和响应模式的一个教程：

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

我有三个不同的div容器：

<div>
<div class="customer">
<customer></customer>
</div>
<div class="dates">
Dates comes here
</div>
<div class="addressAndPhases">
  Address and  phases comes here
</div>
</div>

和 css 看起来像：

@media only screen and (max-width: 500px) {
    [class*=".customer,.dates,.addressAndPhases"] {
        background-color: lightblue;
        width:100%;
    }
}

.customer{
   float: left;
    width: 27%;
    height: 350px;
     box-sizing: border-box;
    padding: 15px;
}

.dates{
      box-sizing: border-box;
      float: left;
      height: 350px;
     width: 22%;  
   padding: 15px;

}

.addressAndPhases{

      box-sizing: border-box;
      text-align: center;
      float: left;
      height: 650px;
     width: 22%;
    padding: 15px;

}

我期待当宽度小于500px时，背景应该是浅蓝色但不幸的是它不能像这样工作。

请帮助我。

感谢。

Answer 1

由于您实际上没有从星号*中受益，您需要将列表中的类分开：

@media only screen and (max-width: 500px) {
    [class="customer"],[class="addressAndPhases"],[class="dates"] {
        background-color: lightblue;
        width:100%;
    }
}

使用这些选择器并没有任何好处：

@media only screen and (max-width: 500px) {
    .customer, .addressAndPhases, .dates {
        background-color: lightblue;
        width:100%;
    }
}

另请注意，为此，您需要将此媒体查询移至类定义下方。否则他们会覆盖你的设置。

Answer 2

你的CSS乱了。即使您的选择器适合您的媒体查询，CSS也会遵守最近的＆＃34;最近＆＃34;宣言。（假设他们具有相同的特异性）

因为你要宣布你的＆＃34; 500px及以下＆＃34;在默认样式之前样式，它们将被覆盖。

这和其他人指出的语法问题正在结合形成你的问题。见下文：

.customer{ float: left; width: 27%; height: 350px; box-sizing: border-box; padding: 15px; } .dates{ box-sizing: border-box; float: left; height: 350px; width: 22%; padding: 15px; } .addressAndPhases{ box-sizing: border-box; text-align: center; float: left; height: 650px; width: 22%; padding: 15px; } @media only screen and (max-width: 500px) { .customer, .addressAndPhases, .dates { background-color: lightblue; width:100%; } }

Answer 3

这是属性css选择器

[class*=".customer,.dates,.addressAndPhases"]

这意味着您要选择所有类似的html标签：

<html_tag class=".customer,.dates,.addressAndPhases">

因为你不能使用＆＃34;，＆＃34;作为不同类名之间的分隔符。你必须分开那些属性选择器

[class="customer"], [class="dates"], [class="addressAndPhases"]

Answer 4

替换为此.customer,.dates,.addressAndPhases{ }我认为class*不适用于多个类，

＆＃13;

@media only screen and (max-width: 900px) {
    .customer,.dates,.addressAndPhases{
        background-color: lightblue;
        width:100%;
    }
}

.customer{
   float: left;
    width: 27%;
    height: 350px;
     box-sizing: border-box;
    padding: 15px;
}

.dates{
      box-sizing: border-box;
      float: left;
      height: 350px;
     width: 22%;  
   padding: 15px;

}

.addressAndPhases{

      box-sizing: border-box;
      text-align: center;
      float: left;
      height: 650px;
     width: 22%;
    padding: 15px;

}

＆＃13;

<div>
<div class="customer">
<customer></customer>
</div>
<div class="dates">
Dates comes here
</div>
<div class="addressAndPhases">
  Address and  phases comes here
</div>
</div>

＆＃13;

Answer 5

为什么不这样写：

@media only screen and (max-width: 500px) {
  .customer, .addressAndPhases, .dates {
     background-color: lightblue;
     width:100%;
   }
}

css3 @media查询多个浏览器

5 个答案: