1
我有一個網格，其中每個區域是50％小屏幕上的寬度和25％的寬度在1200px和更低。訪問者在1366px分辨率下查看頁面，比例因子爲125％。通過這種縮放，網格顯示在兩列中。有沒有辦法以1366px/125％的4列顯示它，而1200列（例如1170）和100％縮放因子留下2列？如何針對特定頁面縮放級別應用css規則？
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