it-swarm.com.ru

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

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

Обновление

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

237
Zubair

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

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

174
BoltClock

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

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

93
Marc J. Schmidt

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

30
haddnin

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

22
ausi

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

Высота запросов

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

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

  • мин-символы
  • макс-символы
  • мин-линии
  • макс-линия
  • мин-дети
  • макс-дети

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

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

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

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

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

13
innovati

Вопрос очень расплывчатый. Как говорит 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.

9
cimmanon

Единственный способ, которым я могу думать, что вы можете выполнить то, что вы хотите чисто с помощью CSS, - это использовать контейнер для жидкости для вашего виджета. Если ширина вашего контейнера составляет процент от экрана, вы можете использовать медиазапросы для стилизации в зависимости от ширины вашего контейнера, так как теперь вы будете знать для каждого размера экрана, каковы размеры вашего контейнера. Например, допустим, вы решили сделать свой контейнер 50% ширины экрана. Тогда для ширины экрана 1200 пикселей вы знаете, что ваш контейнер составляет 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
Roumelis George

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

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

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

В результате получится <div> с высотой, равной 75% ширины контейнера (соотношение сторон 4: 3).

Этот метод также может сочетаться с медиа-запросами и некоторыми специальными знаниями о макете страницы для еще более детального контроля.

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

3
Hendy Irawan

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

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