Question

我不确定这是否可行，但我只是想知道是否有更复杂的方式来实现以下媒体查询：jsFiddle：http://jsfiddle.net/neal_fletcher/XMmyA/
CSS：

.block {
    position: relative;
    width: 1000px;
    height: 100px;
    background: red;
    margin: 0 auto;
}

@media only screen and (max-width: 1000px) {
    .block {
        width: 750px;
    }
}

@media only screen and (max-width: 750px) {
    .block {
        width: 500px;
    }
}

@media only screen and (max-width: 500px) {
    .block {
        width: 250px;
    }
}

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

Answer 1

您可以使用css预处理器sass以及for loop。

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

Answer 2

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

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

Answer 3

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

媒体查询每250px间隔

3 个答案: