我有这个设置，我正在尝试学习媒体查询，但是我真的不明白如何在较小的设备上将它们放大。当我尝试使用列进行不同的媒体查询时，一切都搞砸了。因为它是在台式机上，所以我有3行4列，我想在移动设备上将其显示在另一行的下方。因为它在我的浏览器中，它会按照我想要的方式调整大小，但是在我的手机上却没有。
<div class="container mt-4">
<% @ads.in_groups_of(4, false).each do |group| %>
<div class='row'>
<% group.each do |ad| %>
<div class='col-md-3'>
<div class="card-deck">
<div class="card mt-3">
<img class="card-img-top" src='<%= url_for(ad.photos[0])%>' max-width: auto alt="Card image cap">
<div class="card-body ">
<h5 class="card-title"> <%= ad.title %> </h5>
<p class="card-text"><%= truncate(ad.description, :length => 30)%></p>
<p class="card-text"><%= ad.area %></p>
<a href="#" class="card-link" mb-5><%= ad.contact %></a>
</div>
<%= link_to 'Show', ad %>
<br>
<div class="card-footer">
<small>Created <%= time_ago_in_words(ad.created_at) %> ago </small>
</div>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
这是一段视频，希望它能对您有帮助
https://drive.google.com/file/d/1BzPAKI0i7uIilmag67s9s3o3tivPn8mQ/view?usp=sharing
答案 0 :(得分：1)
制作一个大窗口。扩大和缩小您的内心内容并享受。需要注意的一点是，当屏幕尺寸<545px时，我将其设置为单列跨度。
body {
overflow-x: hidden;
background: #f5f3ef;
margin-top: 4rem;
}
.container-custom-nav {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media(min-width:768px) {
.container-custom-nav {
max-width: 768px;
padding-left: 1.75rem;
padding-right: 1.75rem;
}
}
@media(min-width:1024px) {
.container-custom-nav {
max-width: 1024px;
}
}
@media(min-width:1280px) {
.container-custom-nav {
max-width: 1280px;
padding-left: 2rem;
padding-right: 2rem;
}
}
.products-grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.75rem;
}
@media(min-width:1024px) {
.products-grid-view {
gap: 0.875rem;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
.product-cards {
height: 100%;
display: flex;
flex-direction: column;
border-radius: 0.25rem;
background: white;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
transition: all 0.45s ease-in-out;
}
.product-cards::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 0.25rem;
opacity: 0;
box-shadow: 0 0.0px 0.6px rgba(0, 0, 0, 0.135), 0 0.0px 1.3px rgba(0, 0, 0, 0.118), 0 0.0px 2.2px rgba(0, 0, 0, 0.103), 0 0.2px 3.3px rgba(0, 0, 0, 0.093), 0 0.8px 4.8px rgba(0, 0, 0, 0.083);
transition: opacity 0.45s ease-in-out;
}
.product-cards:hover {
transform: scale(1.0625, 1.0625);
cursor: pointer;
}
.product-cards:hover::after {
opacity: 1;
}
.product-cards .img-body {
padding: 1rem;
}
@media(min-width:1280px) {
.product-cards .img-body {
padding: 1.125rem;
}
}
.product-cards .img-body img {
width: 100%;
height: auto;
border-radius: 0.125rem;
}
.product-cards .desc {
flex: 1 1 auto;
text-align: center;
padding: 1rem 0.75rem 1.5rem 0.75rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.025rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.product-cards .price {
text-align: center;
margin-bottom: auto;
padding: 0 0 2.5rem 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05rem;
}<body class="container-custom-nav">
<div class="products-grid-view">
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
<div class="product-cards">
<div class="img-body"><img src="https://i.imgur.com/0veKPRb.png"></div>
<div class="desc">My Product</div>
<div class="price">$399 USD</div>
</div>
</div>
</body>