0

我正在尝试设置页面样式,桌面运行良好,我的问题是移动视图。移动视图正在处理选定的组件,例如背景图像运行良好。

我想在移动视图上给这张卡一个宽度300px;,但它不是在挑选,但是当我放置高度700px或任何东西时它可以工作。正如您在屏幕截图中看到的那样,移动样式被取消,这意味着它没有被应用。

移动端视图,卡片宽度对屏幕来说太大了,我需要它是300px

这是我的 CSS

@media only screen and (max-width: 600px) {
 h3 {
font-size: 1.2em;
 }

.ant-card {
  margin: auto;
  width: 300px;
}

.Background {
background-image: url(./images/mob.jpg);
background-size: cover;
text-align: center;
}

}

 .ant-card {
   margin: auto;
   width: 400px;
    }

有人看到我没看到的东西吗?

4

1 回答 1

3

我相信这只是 CSS 文件中决定偏好的顺序。因此,在具有相同特异性级别的媒体选择器查询之前声明您的“默认”样式。例如:

 .ant-card {
   margin: auto;
   width: 400px;
 }

 @media only screen and (max-width: 600px) {
   h3 {
     font-size: 1.2em;
   }

  .ant-card {
    margin: auto;
    width: 300px;
  }

  .Background {
    background-image: url(./images/mob.jpg);
    background-size: cover;
    text-align: center;
  }  
}
于 2019-03-16T13:23:48.383 回答