Question

我想问你如何在我减少浏览器大小的时候制作一个包含3个项目的响应列表，这些项目是垂直的，而另一个是在另一个之下，当浏览器窗口增长时，项目将是在一个。我的列表代码如下，我设法在中心和一行中对它们进行排序，但我对响应性感到困惑。

<div class="list">
<ul id="2" class="3">
<li><a href="#">< </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>

和css

.list{
    position: relative;
    width: 100%;
    display: block;
}

.list li {
    width: 33.3%; /* nice 3 columns */
    float: left;
    padding: 0; /* should have zero paddng/margin */
    margin: 0;
}

.list li > span {
 margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
 display: block;
}

Answer 1

当窗口宽度小于您想要的大小时，您可以使用媒体查询来设置断点并将“.list li”宽度设置为100％。

以下是有关媒体查询的链接：http://cssmediaqueries.com/

Answer 2

您正在寻找的是css媒体查询。例如，将其添加到您的css：

@media (max-width:500px){
    .list li {
        float:none;
   }
}

这里是jsfiddle。

建议你读这个：

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries http://cssmediaqueries.com/what-are-css-media-queries.html

纵向和横向响应列表

2 个答案: