Math CSS3算法

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

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

@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...

---

是的，非常有可能使用CSS媒体查询-

.mydiv{
宽度：80%；/*正常情况下*/
}
/*屏幕宽度<500时的特殊情况*/
@全部和全部介质（最大宽度：500px）{
mydiv先生{
宽度：320px；
}
}

欢迎来到响应式设计的奇妙世界！：]太好了-是的。很少——一点也不……）

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

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