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。

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

事实是：为什么do.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

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