Question

美好的一天，

我在网页上有一个小图库部分，我在其中使用了css网格。它在普通的网络浏览器上运行得非常好，当我缩小它时，我已经设法调整它，因为我希望使用媒体查询（一个图像接一个），令我失望的是，这在查看时没有工作移动设备。

这是我创建的第一个网站，所以我预计会遇到问题。但我现在被困在这一个。

我需要在移动浏览器上将图像排列在彼此之下。我该怎么做？见下面的html＆amp; 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

有很多方法可以做到这一点，而且，基于你的问题，我假设这些yAxis: [{ height: 200 },{ height: 160, top: 325 }]已经水平显示了？这意味着他们正在使用div或display的{{1}}属性，或者已使用inline。如果你想要一些可以重复使用的东西（比如Bootstrap框架），你可以这样做：

inline-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) -->

CSS Grid - 使其适合移动设备

3 个答案: