Медиа-запросы для каждого интервала 250 пикселей

Question

Медиа-запросы для каждого интервала 250 пикселей

0

Я не уверен, возможно ли это, но мне просто интересно, есть ли более сложный способ достижения следующих медиа-запросов: 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 пикселей. Любые предложения будут ценны!

user1374796 10 май 2014, в 17:01

Источник

3

То, что у вас есть, это единственный способ в CSS - это лучшее решение, поскольку вы не должны полагаться на JS для пользовательского интерфейса.
Rory McCrossan 10 май 2014, в 14:40
0

В качестве альтернативы, вы можете иметь PHP (или любой другой язык сценариев на стороне сервера, который вы используете) генерировать CSS медиазапроса для вас настолько широко, насколько вам нужен ваш экран.
AVK 10 май 2014, в 15:13
0

Вы можете взглянуть на SASS или LESS . Они могут не соответствовать вашим потребностям, но оба они являются препроцессорами CSS.
agrm 10 май 2014, в 15:43

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

3 ответа

0

Если вы хотите пропустить использование медиа-запросов, почему бы просто не установить ширину вашего блока с помощью процента (демо):

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

Mottie 10 май 2014, в 13:58

0

Предположительно, ОП хочет, чтобы ширина блока увеличивалась с шагом 250 пикселей, а не плавно.
BoltClock♦ 10 май 2014, в 15:38

-2

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

mehulmpt 10 май 2014, в 13:49

1

На мой взгляд, стили должны быть установлены в CSS, насколько это возможно. И это возможно в этом случае ...
agrm 10 май 2014, в 15:45
0

@ Anders G: Это невозможно без препроцессора - и с препроцессором вы все равно просто генерируете статический CSS. Нет способа сделать это динамически с помощью CSS.
BoltClock♦ 11 май 2014, в 06:36

Ещё вопросы

То, что у вас есть, это единственный способ в CSS - это лучшее решение, поскольку вы не должны полагаться на JS для пользовательского интерфейса.
В качестве альтернативы, вы можете иметь PHP (или любой другой язык сценариев на стороне сервера, который вы используете) генерировать CSS медиазапроса для вас настолько широко, насколько вам нужен ваш экран.
Вы можете взглянуть на SASS или LESS . Они могут не соответствовать вашим потребностям, но оба они являются препроцессорами CSS.
Предположительно, ОП хочет, чтобы ширина блока увеличивалась с шагом 250 пикселей, а не плавно.
На мой взгляд, стили должны быть установлены в CSS, насколько это возможно. И это возможно в этом случае ...
@ Anders G: Это невозможно без препроцессора - и с препроцессором вы все равно просто генерируете статический CSS. Нет способа сделать это динамически с помощью CSS.

Cameron Martin · Accepted Answer · 2014-05-10T13-22-00.000Z

Вы можете использовать sss препроцессор sass для этого, а также цикл for.

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