Медиа-запросы могут изменить на основе элемента div, а не на экране?

Я хотел бы использовать медиа-запросы для изменения размера элементов на основе размера div элемент, в котором они находятся. Я не могу использовать размер экрана div просто используется как виджет на веб-странице, и его размер может меняться.

обновление

похоже, что сейчас над этим ведется работа: https://github.com/ResponsiveImagesCG/cq-demos

213
css css3 media-queries

9 ответов

нет, медиа-запросы не предназначены для работы на основе элементов страницы. Они предназначены для работы на основе устройств или типы носителей (поэтому их и называют СМИ запросы). width, height и другие измерения на основе мультимедийных функций все ссылаются на габариты либо видового экрана или экрана устройства на экране медиа. Они не могут использоваться для ссылки на определенный элемент на странице.

Если вам нужно применяйте стили в зависимости от размера определенного div элемент на Вашей странице, вы должны будете использовать JavaScript, чтобы наблюдать изменения в размер div элемент вместо медиа-запросы.

163

Я только что создал JavaScript-прокладку для достижения этой цели. Посмотрите, если хотите, это доказательство концепции, но будьте осторожны: это ранняя версия и все еще нуждается в некоторой работе.

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

84

медиа-запрос внутри iframe может функционировать как запрос элемента. Я успешно реализовал это. Идея пришла из недавнего сообщения о Отзывчивый Объявлений на Zurb. Нет Javascript!

29

в настоящее время это невозможно только с CSS, как написал @BoltClock в принятом ответе, но вы можете обойти это с помощью JavaScript.

Я создал запрос контейнера (aka element query) prolyfill для решения этой проблемы. Он работает немного иначе, чем другие скрипты, поэтому вам не нужно редактировать HTML-код ваших элементов. Все, что вам нужно сделать, это включить скрипт и использовать его в CSS, как Итак:

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill

17

я столкнулся с той же проблемой пару лет назад и финансировал разработку плагина, чтобы помочь мне в моей работе. Я выпустил плагин с открытым исходным кодом, чтобы другие могли воспользоваться им, и вы можете захватить его на Github:https://github.com/eqcss/eqcss

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

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

Итак, какие условия поддерживаются для адаптивных стилей с EQCSS?

Вес Запросов

  • min-ширина в px
  • min-ширина в %
  • максимальная ширина в px
  • максимальная ширина в %

Высота Запросы

  • мин-высота в px
  • мин-высота в %
  • Макс-высота в px
  • максимальная высота в %

Запросы Графа

  • мин-символы
  • max-символы
  • мин-строк
  • max-lines
  • мин-дети
  • максимум-детей

Специальные Селекторы

внутри запросов элементов EQCSS вы также можете использовать три специальных селектора, которые позволяют более конкретно применять стили:

  • $this (элемент(ы), соответствующий запросу)
  • $parent (родительский элемент(ы) элемента (ов), соответствующий запросу)
  • $root (корневой элемент документа <html>)

запросы элементов позволяют составить макет из индивидуально отзывчивых модулей дизайна, каждый из которых имеет немного "самосознания" о том, как они отображаются на странице.

С EQCSS вы можете конструировать один виджет, чтобы хорошо выглядеть от 150px в ширину до 1000px в ширину, то вы можете уверенно бросить этот виджет в любую боковую панель на любой странице, используя любой шаблон (на любом сайте) и

13

вопрос очень расплывчатый. Как говорит BoltClock, медиа-запросы знают только размеры устройства. Однако для выполнения корректировок можно использовать запросы мультимедиа в сочетании с селекторами descender.

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

единственное другое решение требует JS.

9

единственный способ, которым я могу думать, что вы можете выполнить то, что хотите, с помощью css, - использовать контейнер жидкости для вашего виджета. Если ширина вашего контейнера составляет процент от экрана, вы можете использовать медиа-запросы для стиля в зависимости от ширины вашего контейнера, так как теперь вы будете знать для размеров каждого экрана, каковы размеры вашего контейнера. Например, предположим, вы решили сделать 50% ширины экрана вашего контейнера. Тогда для ширины экрана 1200px вы знаете, что ваш контейнер 600 пикселей

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}
3

Я также думал о медиа-запросах, но потом я нашел это:

просто создайте обертку <div> С процентным значением для padding-bottom, например:

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>

это приведет к <div> С высотой, равной 75% от ширины своего контейнера (соотношение сторон 4:3).

этот метод также может быть связан с медиа-запросами и немного специальных знаний о макете страницы для еще более тонкого управления.

этого достаточно для моих нужд. Этого может быть достаточно и для ваших нужд.

2

для моего я сделал это, установив максимальную ширину div, следовательно, для малого виджета не повлияет, и большой виджет будет изменен из-за стиля max-width. 

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
0