如何将css规则应用于特定的页面缩放级别

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- long -4、col-xs-4。

重要的是要理解100% = 12，例如:

col-lg-12