媒体查询问题

Question

我正在尝试前端指导项目，但在提供不同视口大小（用于桌面）的图片时遇到问题，我不知道出了什么问题，我使用了图片元素并声明了图片应该以什么宽度提供服务但是它不起作用。 令人困惑的方面是 flexbox 和网格显示属性没有太大影响。 小的移动图像不会被桌面图像取代。

 * { padding: 0; margin: 0; box-sizing: border-box; } \*::before, \*::after { padding: 0; margin: 0; box-sizing: border-box; } html, body { min-height: 100vh; background-color: hsl(30, 38%, 92%); } main.background { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; background-color: hsl(30, 38%, 92%); article.card-body { display: flex; background-color: #fff; flex-direction: column; max-width: 346px; border-radius: 10px; section.card-details { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 25px; picture.image-container { width: 346px; height: 243px; border-radius: 10px; } header.title { color: hsl(228, 12%, 48%); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 5px; margin-bottom: 13px; margin-left: -5px; margin-top: -3px; transform: scale(0.9); } h1.title-detail { color: hsl(212, 21%, 14%); font-family: 'Fraunces', serif; font-size: 34px; line-height: 1; font-weight: 700; margin-bottom: 17px; } } } } p.section-detail { font-family: 'Montserrat', sans-serif; color: hsl(228, 12%, 48%); font-size: 13px; line-height: 1.6; margin-bottom: 29px; } h2.price { display: flex; flex-direction: row; font-family: 'Fraunces', sans-serif; color: hsl(158, 36%, 37%); font-size: 32px; font-weight: 900; margin-bottom: 20px; } h2.price::after { content: '$169.99'; display: flex; flex-direction: row; align-self: center; color: hsl(228, 12%, 48%); font-size: 11px; font-family: 'Fraunces', sans-serif; font-weight: 300; padding-left: 23px; text-decoration: line-through; } img.perfume-image { object-fit: contain; width: 346px; height: 243px; border-top-left-radius: 10px; border-top-right-radius: 10px; } img.cart-icon { margin-left: -15px; } button.add-to-cart { display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight: 700; font-family: 'Montserrat', sans-serif; background-color: hsl(158, 36%, 37%); color: #fff; width: 298px; height: 50px; border: none; border-radius: 5px; } button.add-to-cart:hover { background-color: hsl(158, 36%, 13%); cursor: pointer; } span.btn-text { padding-left: 15px; } footer.challenge-userinfo { display: flex; align-self: flex-end; div.attribution { background-color: #fff; text-align: center; width: 100%; font-size: 11px; text-align: center; } div.attribution a { color: hsl(228, 45%, 44%); text-decoration: none; } } @media (min-width: 800px) { main { display: flex; flex-direction: column; align-items: center; justify-content: center; } article.card-body { display: flex; flex-direction: row; min-width: 616px; } picture-image-container { display: flex; flex-direction: row; }.card-details { width: 308px; } }

 <main class="background"> <img src="./images/image-product-mobile.jpg" alt="perfume"> PERFUME <h1>Gabrielle Essence Eau De Parfum</h1> <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p> <h2>$149.99</h2> <img src="./images/icon-cart.svg" alt="cart">Add to Cart Challenge by <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>. Coded by <a href="https://github.com/David4bay">David Bayode</a>.

我尝试使用弄乱最小和最大宽度来查看它是否是宽度异常。

Answer 1

找到了解决方案，我的嵌套 scss styles 具有很高的特异性，可以防止触发媒体查询。