math - CSS3 算术

Question

我最近一直在使用和学习 CSS3，并享受它的许多功能。现在我想知道是否可以设置一个有条件地分配 block 元素宽度的 CSS 规则。我所追求的那种东西 - 如果屏幕宽度小于 500 像素，则使用 320 像素的宽度，否则使用屏幕大小的 80% 的宽度。

是的，我知道我可以通过 JavaScript 做这类事情 - 只是想知道是否有更优雅的 CSS3 方法。

Answer 1

是的，使用 CSS 媒体查询很有可能 - http://www.css3.info/preview/media-queries/

.mydiv {
    width: 80%; /* normal case */    
}

/* special case if screen width < 500 */
@media all and (max-width: 500px) {
    .mydiv {
        width: 320px;
    }
}