Question

我有一个网格，每个块在小屏幕上的宽度 50％，在1200px及以下的宽度为25％。访问者以1366px分辨率查看页面，比例因子为125％。通过此缩放，网格显示在两列中。有没有办法在4列中显示1366px / 125％，而留下2列1200-（例如1170）和100％比例因子？

HTML：

<div class="tiles">
    <a href=""><p>Item 1</p><img src="http://placehold.it/300x200" alt="Item 1"></a>
    <a href=""><p>Item 2</p><img src="http://placehold.it/300x200" alt="Item 2"></a>
    <a href=""><p>Item 3</p><img src="http://placehold.it/300x200" alt="Item 3"></a>
    <a href=""><p>Item 4</p><img src="http://placehold.it/300x200" alt="Item 4"></a>
    <a href=""><p>Item 5</p><img src="http://placehold.it/300x200" alt="Item 5"></a>
    <a href=""><p>Item 6</p><img src="http://placehold.it/300x200" alt="Item 6"></a>
    <a href=""><p>Item 7</p><img src="http://placehold.it/300x200" alt="Item 7"></a>
    <a href=""><p>Item 8</p><img src="http://placehold.it/300x200" alt="Item 8"></a>
    <a href=""><p>Item 9</p><img src="http://placehold.it/300x200" alt="Item 9"></a>
    <a href=""><p>Item 10</p><img src="http://placehold.it/300x200" alt="Item 10"></a>
    <a href=""><p>Item 11</p><img src="http://placehold.it/300x200" alt="Item 11"></a>
    <a href=""><p>Item 12</p><img src="http://placehold.it/300x200" alt="Item 12"></a>
    <a href=""><p>Item 13</p><img src="http://placehold.it/300x200" alt="Item 13"></a>
    <a href=""><p>Item 14</p><img src="http://placehold.it/300x200" alt="Item 14"></a>
    <a href=""><p>Item 15</p><img src="http://placehold.it/300x200" alt="Item 15"></a>
    <a href=""><p>Item 16</p><img src="http://placehold.it/300x200" alt="Item 16"></a>
</div>

CSS：

body {
    font-family: Arial;
    margin: 0;
}
.tiles {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid green;
}
.tiles a {
    display: block;
    width: 50%;
    border: 1px solid green;
    box-sizing: border-box;
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 0 10px 5px;
}
.tiles img {
    width: 100%;
}
@media (min-width: 1200px) {
    .tiles a {
        width: 25%;
    }
}

以下是一个示例：https://codepen.io/exunreal/pen/gLaYxK

Answer 1

使用bootstrap。

http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

您只需要为小尺寸列添加类.col-sm-4（请参阅文档尺寸大小：http://getbootstrap.com/css/#grid-options）。此外，还有col-lg-4，col-xs-4用于其他屏幕尺寸。

重要的是要明白100％= 12，例如：

COL-LG-12

我希望这能帮到你。

如何为特定页面缩放级别应用css规则？

1 个答案: