CSS 媒体查询问题：元素不应该受媒体查询影响

Question

我完全是 html 和 css 的新手，这可能是一个愚蠢的问题。不管怎样，我写了这段 HTML 代码：

* {
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
}

p {
  font-size: 14px;
  font-family: 'Work Sans', 'sans serif';
  font-weight: 500;
  color: hsl(224, 23%, 55%);
  text-align: center;
  margin-top: 20px;
}

.button {
  font-size: 15px;
  font-weight: 700;
  border: none;
  font-family: 'Work Sans', 'sans serif';
  padding-top: 13px;
  padding-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: hsl(245, 75%, 52%);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
  width: 75%;
  height: 6%;
  align-self: center;
  white-space: nowrap;
}

a {
  font-size: 15px;
  font-weight: 700;
  color: hsl(223, 47%, 23%);
  font-family: 'Work Sans', 'sans serif';
  text-decoration-style: underline;
}

body {
  background-image: url(images/pattern-background-desktop.svg);
  background-position-y: -270px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: hsl(225, 100%, 94%);
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 23%;
  height: 80vh;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  border-radius: 25px;
  background-color: white;
}

.illustration-hero {
  width: 100%;
  height: 30%;
  justify-content: flex-start;
  background-image: url(images/illustration-hero.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  /* margin-bottom:210px; */
}

@media screen and (max-width:377px) {
  body {
    background-image: url(images/pattern-background-mobile.svg);
  }
  .container {
    width: 80%;
    display: flex;
    flex-direction: column;
  }
}

.order {
  margin-top: 40px;
  font-weight: 900;
  font-size: 25px;
  font-family: 'Work Sans', 'sans serif';
  color: hsl(223, 47%, 23%);
  font-style: bold;
  align-self: center;
}

.info {
  min-height: 15%;
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  /* border:1px solid black; */
  background-color: hsl(225, 100%, 98%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.info img {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
}

.plan {
  height: 100%;
}

.plan ul {
  list-style-type: none;
  margin-left: 20px;
  align-self: center;
  margin-top: 20px;
  font-family: 'Work Sans', 'sans serif';
  font-weight: 900;
}

.price {
  font-family: 'Work Sans', 'sans serif';
  font-weight: 500;
  color: hsl(0, 0%, 67%);
}

.change {
  margin-left: 140px;
  margin-top: -25px;
}

<div class="container">

  <div class="illustration-hero"></div>
  <div class="order">Order Summary</div>
  <p>You can now listen to milions of songs,<br> audiobooks and podcast on any device <br> anywhere you like!
  </p>

  <div class="info">
    <img class="icon-music" src="images/icon-music.svg" alt="Icon Music">
    <div class="plan">
      <ul>
        <li>Annual Plan</li>
        <li></li>
        <span class="price">$59.99/year</span>
      </ul>
      <div class="change">
        <a href="#">Change</a>
      </div>
    </div>
  </div>

  <button class="button">Proceed to Payment</button>

问题如下：在响应尺寸宽度：1440px 中，一切都很好。例如，在 Iphone-X 尺寸（宽度：375px）中，标记为 .illustration-hero（蓝色矩形图像）的元素没有边界半径下界 flex-start。

我尝试在媒体查询 .illustration-hero 中添加与桌面版本相同的属性，但没有任何结果。

事实是：为什么.illustration-hero在iPhone-X版本中没有border-radius(nether flex-start)？

Answer 1

很难理解你在问什么。根据你的代码，我理解的是。

1. 媒体查询没有写入 init 的边界半径值，所以边界半径不应应用 init ？
2. 您尝试在媒体查询中复制粘贴边框半径值，但没有影响？

如果我理解正确，请告诉我。

1. 您正在以自上而下的方式编写媒体查询，即。您正在为大屏幕而不是为小型设备编写 css，因此在您的情况下，您在 Top ie 中给出边框半径。桌面将自动应用于小型设备。 如果您不希望发生这种情况，则需要将方法更改为底部顶部。

2. 边框半径未显示，因为您的图像大小是包含且高度是父 div 小于宽度，因此图像永远不会覆盖整个宽度并且您看不到边框半径

我会以自上而下的方式为您编写示例，只是为了给您一些想法。

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 23%;
  height: 80vh;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  border-radius: 25px;
  background-color: white;
}

.illustration-hero {
  width: 100%;
  height: 30%;
  justify-content: flex-start;
  background-image: url('https://via.placeholder.com/300');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

@media screen and (max-width:377px) {
  body {
    background-image: url('https://via.placeholder.com/300/ff0000');
  }
  .container {
    width: 80%;
    display: flex;
    flex-direction: column;
  }
  
  .illustration-hero { 
    border-radius: 0;
  }
}

<div class="container">
  <div class="illustration-hero"></div>

Answer 2

据我了解您的问题...您在问为什么样式在媒体最大宽度下应用...如果这是您的问题，那么答案是媒体查询不会删除所有以前的样式但是会覆盖指定的属性，这意味着如果您想通过媒体查询覆盖样式，则必须在媒体块内指定这些属性。 . 如果这不是您所问的，请尝试重新表述您的问题。