Можно ли изменять размер медиа-запросов на основе элемента div вместо экрана?


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

обновление

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

9 213

9 ответов:

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

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

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

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

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

в настоящее время это невозможно только с помощью 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

я столкнулся с той же проблемой пару лет назад и финансировал разработку плагина, чтобы помочь мне в моей работе. Я выпустил плагин как с открытым исходным кодом, так что другие могут извлечь из него пользу, и вы можете захватить его на 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?

Вес Запросов

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

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

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

Количество Запросов

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

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

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

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

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

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

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

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

единственный способ, которым я могу думать, что вы можете выполнить то, что вы хотите чисто с 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 */
}

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

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

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

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

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

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

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

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