CSS Grid - 使其移动友好[重复]

Question

早安，

我在网页上有一个小画廊部分，我在其中使用了 CSS 网格。它在普通的网络浏览器上工作得很好，当我缩小它时，我已经设法让它按照我希望使用媒体查询（一张接一张的图像）进行调整，令我失望的是，在移动设备上查看时这不起作用.

这是我创建的第一个网站，所以我预计会出现问题。但我现在坚持这个。

我需要在移动浏览器上将图像排列在彼此下方。我该怎么办？见下面的 html & css，网页是 redneckrebellion.co.za 如果你想看我在说什么或看https://codepen.io/underlight/pen/eyYLBa。

<content class="main-body">
<div class="main-content">
    <div class="portfolio">
        <div class="portfolio-item medium-one">
            <div class="description">
                <h1 class="text">Coffee Table</h1>
                <p class="text">Custom Union Jack Coffee Table</p>
            </div>
        </div>
        <div class="portfolio-item medium-two">
            <div class="description">
                <h1 class="text">Laser Cut Logo</h1>
                <p class="text">Redneck Rebellion Laser Cut Logo</p>
            </div>
        </div>
        <div class="portfolio-item wide-one">
            <div class="description">
                <h1 class="text">Custom Desk</h1>
                <p class="text">Custom Desk Built To Clients Design</p>
            </div>
        </div>
        <div class="portfolio-item tall">
            <div class="description">
                <h1 class="text">Container Cupboard</h1>
                <p class="text">Custom Cupboard Built For Lillimex</p>
            </div>
        </div>
        <div class="portfolio-item wide-two">
            <div class="description">
                <h1 class="text">Custom Shelf</h1>
                <p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
            </div>
        </div>
    </div>
</div>

谢谢！

Answer 1

有很多方法可以做到这一点，根据您的问题，我假设这些divs 已经水平显示？这意味着他们正在使用inline 或inline-block 的display 属性，或者已经使用float。如果你想拥有一些可重用的东西（比如 Bootstrap 框架），你可以这样做：

@media screen and (max-width: 480px) {
    .medium-one, .medium-two .wide-one .tall .wide-two {
        display:block;
    }
}

另外，我强烈建议使用已经为类似的东西制作的库，例如 Bootstrap

Answer 2

最简单的方法是用这样的媒体查询包围你的.portfolio-item：

@media(min-width: 500px) {
  .portfolio-item {
     margin: 10px;
     box-shadow: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 5px solid white;
     border-radius: 3%;
  }
}

Answer 3

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

    <!-- .container is main centered wrapper -->
<div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <!-- just use a number and class 'column' or 'columns' -->
  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

    enter code here

  <!-- there are a few shorthand columns widths as well -->
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>
  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>

</div>

<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->