CSS @media 查询

在基于Web的UI设计中，使用CSS @media查询可以根据设备的屏幕宽度或高度或其他条件来应用不同的CSS样式，以适应不同的设备和屏幕尺寸。

例如，我们可以使用如下的CSS @media查询，当设备的屏幕宽度不等于2560px时，应用.table-div类的CSS样式。

@media not (all and (device-width: 2560px)) {
    .table-div { 
         width: 104%; 
    } 
}

在上述的代码中，我们使用了指令not来排除括号内所定义的条件，即设备宽度为2560px。如果条件成立，则应用类.table-div的样式，使其宽度为104%。

如果你想要适应不同的设备，可以在@media查询中设置不同的条件和样式。例如：

/* 当设备宽度不小于768px时应用该样式 */
@media (min-width: 768px) {
    .table-div { 
         width: 90%; 
    } 
}

/* 当设备宽度不小于992px时应用该样式 */
@media (min-width: 992px) {
    .table-div { 
         width: 80%; 
    } 
}

/* 当设备宽度不小于1200px时应用该样式 */
@media (min-width: 1200px) {
    .table-div { 
         width: 70%; 
    } 
}

以上，我们根据设备的屏幕宽度，设置了三个不同的@media查询，并应用了不同的.table-div类的样式，以适应不同的设备屏幕尺寸。

更多关于CSS @media查询的知识，请参考W3C的官方文档。