Сделать атрибуты дочерних CSS зависят от размера родительского элемента (например, запросы к файлам зависят от ширины браузера)

У меня есть структура формы, зависящая от ширины окна браузера: чтобы упростить вопрос, предположим, что он имеет три уровня (начинайте с самого широкого случая):

  • Полевая метка слева, поле ввода в центре и описание поля справа.
  • Полевая метка слева, поле ввода в центре и описание поля ниже поля ввода
  • Полевая метка сверху, поле ввода в середине и описание поля внизу

Это делается следующим образом:

@media (max-width:1000px) { /* code for 1. */ }
@media (max-width:900px) { /* code for 2. */ }
@media (max-width:800px) { /* code for 3. */ }

То, что я прошу, это получить ту же функциональность для элементов all, поэтому, когда я помещаю form в div с шириной 1000px, CSS будет применяться к этому специфические form те же свойства, которые используются для стилизации 1-го макета (max-width:1000px). Когда этот div будет уменьшаться до 800px, form должен автоматически переходить на третий макет, даже если окно просмотра все еще имеет ширину, установленную на 1000px.

Возможно ли это?

Ответы

Ответ 1

Благодаря второй ссылке в комментарии @torazaburo в вопросе, я нашел идеальное решение:

https://github.com/marcj/css-element-queries

Тем не менее, он очень молод, он еще имеет некоторые уязвимости (29 июля 2013 г.), но также имеет потенциал. Он не основан на запросах @element, а на attributes. Пример:

.fooDiv[min-width="1000px"] .form { /* code for 1. */ }
.fooDiv[min-width="900px"] .form { /* code for 2. */ }
.fooDiv[min-width="800px"] .form { /* code for 3. */ }

Эти атрибуты устанавливаются слушателями, поэтому они работают с каждым изменением размера .fooDiv.

Другой проект (несовместимый с SASS/SCSS),

https://github.com/Mr0grog/element-query

будет работать следующим образом:

.test-element:media(max-available-width: 400px) {
    background: purple;
}

В приведенном выше CSS .test-element будет иметь фиолетовый фон, если он находится внутри элемента 400px в ширину или меньше.

Еще один,

https://github.com/tysonmatanich/elementQuery Я использую его в повседневных проектах.

Еще об этом:

http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

Ответ 2

Не то, чтобы я знал, с точки зрения прямого CSS. Вы можете комбинировать jQuery для достижения этого. Пример jQuery:

$(document).ready(function() {
    box_size();

    $(window).resize(function() {
        box_size();
    });

    function box_size() {
        var window_width = $(window).width();

        $('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three');

        if (window_width <= 1000 && window_width > 900) {
            $('.box').addClass('break-one');
        }
        else if (window_width <= 900 && window_width > 800) {
            $('.box').addClass('break-two');
        }
        else if (window_width <= 800) {
            $('.box').addClass('break-three');
        }
    }
});

Функция вызывается дважды. Однажды, когда он загружается, чтобы проверить размер и снова при изменении размера браузера.

Css:

.box {
    color: black;
}

.box.break-one {
    color: red;
}

.box.break-two {
    color: blue;
}

.box.break-three {
    color: yellow;
}

Конечно, посмотрите в действии в jsfiddle: http://jsfiddle.net/PWbvY/