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 在媒體最大寬度下應用...如果這是您的問題，那么答案是媒體查詢不會刪除所有以前的樣式但會覆蓋指定的屬性，這意味着如果要通過媒體查詢覆蓋樣式，則必須在媒體塊內指定這些屬性。 . 如果這不是您所問的，請嘗試重新表述您的問題。