CSS3算法

Question

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

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

Answer 1

是的，使用CSS media queries 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;
    }
}

Answer 2

@media only screen and (max-width: 500px) {
    // CSS rules go here
}

@media only screen and (min-width: 501px) and (max-width: 959px) {
    // CSS rules go here
}

@media only screen and (min-width: 960px) {
    // CSS rules go here
}

etc...

From the W3C