Javascript 每250像素间隔的媒体查询

我不确定这是否可行，但我只是想知道是否有更复杂的方法来实现以下媒体查询：JSFIDLE: CSS:

---

因此，与每250px声明一个不同的媒体查询不同，有没有更好的方法通过css或jquery实现这一点？因此，每250px，.块宽度减少250px。如有任何建议，将不胜感激

如果要跳过使用媒体查询，为什么不使用百分比设置块的宽度：

<script>
$(function() {
var windowsize = parseInt($(window).width());
var block = parseInt($(".block").outerWidth(true));

if(windowsize <= block && windowsize%250==0) {
$(block).css('width',windowsize-250+"px");
}
});
</script>

---

您可以使用css预处理器和一个

---

你所拥有的只是CSS本身的唯一方式——这是迄今为止最好的解决方案，因为你不应该依赖JS来实现UI。作为替代方案，你可以使用PHP或任何你正在使用的服务器端脚本语言，为你生成媒体查询CSS，范围可以根据你的屏幕需要而定。你可以查看或。它们可能不适合您的需要，但它们都是CSS预处理器。大概OP希望块的宽度以250px的步长增加，而不是流畅地增加。在我看来，样式应该尽可能在CSS中设置。在这种情况下，这是可能的…@Anders G:没有预处理器是不可能的——而有了预处理器，你只是在生成静态CSS而已。没有办法用CSS动态地实现这一点。

<script>
$(function() {
var windowsize = parseInt($(window).width());
var block = parseInt($(".block").outerWidth(true));

if(windowsize <= block && windowsize%250==0) {
$(block).css('width',windowsize-250+"px");
}
});
</script>

.block {
    width: 75%;
    min-width: 250px;
    height: 100px;
    background: red;
    margin: 0 auto;
}

@for $i in 1 through 3 {
    @media only screen and (max-width: (5-$i) * 250px) {
        .block {
            width: (4-$i) * 250px;
        }
    }
}