我的 logo-bar_item 类的最大宽度有一些问题。我在两个断点处设置了 2 个媒体查询，但它们也不起作用。感谢您的帮助，我对 html/css 很陌生
https://codepen.io/bradscanvas/pen/NWWqZza
<!DOCTYPE html>
<div id="shopify-section-1557218386577" class="shopify-section index-section"><div class="logo-wrapper">
<ul class="logo-bar">
<li class="logo-bar_item">
<img src="//cdn.shopify.com/s/files/1/1784/1613/files/billboard_1755fdfa-a418-4240-b8b9-b6bc022d92fe_160x160@2x.png?v=1561106441" alt="" class="logo-bar_image">
</li>
<li class="logo-bar_item">
<img src="//cdn.shopify.com/s/files/1/1784/1613/files/buzzfeed_49c1df15-d0c0-4dac-8678-56aed46a2b32_160x160@2x.png?v=1561106477" alt="" class="logo-ba=_image">
</li>
<li class="logo-bar_item">
<img src="//cdn.shopify.com/s/files/1/1784/1613/files/forbes_05276adf-5d18-4e64-92b7-1ee27f3118ea_160x160@2x.png?v=1561106497" alt="" class="logo-bar_image">
</li>
<li class="logo-bar_item">
<img src="//cdn.shopify.com/s/files/1/1784/1613/files/inc_ca0e061a-f3e2-406e-a8b2-546eb9bdba98_160x160@2x.png?v=1561107433" alt="" class="logo-bar_image">
</li>
<li class="logo-bar_item">
<img src="//cdn.shopify.com/s/files/1/1784/1613/files/entrepreneur_984311dd-a59c-4639-b916-a705f2e67f9f_160x160@2x.png?v=1561110682" alt="" class="logo-bar_image">
</li>
</ul>
</div>
</div>
.logo-bar {
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-family: Lato,sans-serif;
font-style: normal;
font-weight: 400;
color: #3d4246;
line-height: 1.5;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
margin-bottom: -25px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.logo-bar_image {
display: block;
margin: 0 auto;
}
.ul ol {
margin: 0;
padding: 0;
}
.logo-bar_item {
padding: 20px;
vertical-align: middle;
margin: 10px 0px;
max-width: 180px;
}
media screen and (max-width: 1200px)
.logo-bar_item {
max-width: 130px;
}
media screen and (max-width: 600px)
.logo-bar_item {
max-width: 100px;
}
每个标志应该均匀分开，并随着屏幕尺寸的减小而减小
最佳答案
@media screen and (max-width: 1200px){
.logo-bar_item {
max-width: 130px;
}
}
@media screen and (max-width: 600px){
.logo-bar_item {
max-width: 100px;
}
}
您刚刚跳过了 @ 和 {}
而且，如果你想让 img 跟随父级的 max-width，添加它
.logo-bar_item > img {
width:100%;
}
关于html - 媒体查询不工作 & 最大宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58314293/