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

Question

我有一个网格，其中每个 block 在小屏幕上为 50% 宽度，在 1200 像素及以下屏幕上为 25% 宽度。访问者以 1366px 的分辨率和 125% 的比例因子查看页面。通过这种缩放，网格显示在两列中。有没有办法在 1366px/125% 的 4 列中显示它，同时为 1200-(例如 1170)和 100% 比例因子保留 2 列？

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

我希望这对你有帮助。