Я не уверен, возможно ли это, но мне просто интересно, есть ли более сложный способ достижения следующих медиа-запросов: 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;
}
}
Таким образом, вместо объявления другого медиа-запроса каждые 250 пикселей, есть ли лучший способ достичь этого с помощью css или jquery? Поэтому каждые 250 .block
ширина .block
уменьшается на 250 пикселей. Любые предложения будут ценны!
Если вы хотите пропустить использование медиа-запросов, почему бы просто не установить ширину вашего блока с помощью процента (демо):
.block {
width: 75%;
min-width: 250px;
height: 100px;
background: red;
margin: 0 auto;
}
<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>