缩放级别html,如何针对特定页面缩放级别应用css规则？

我有一个网格，其中每个区域是50％小屏幕上的宽度和25％的宽度在1200px和更低。访问者在1366px分辨率下查看页面，比例因子为125％。通过这种缩放，网格显示在两列中。有没有办法以1366px/125％的4列显示它，而1200列(例如1170)和100％缩放因子留下2列？如何针对特定页面缩放级别应用css规则？

HTML：

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

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%;

}

}

2016-11-08

Alex-ua