Можно ли изменять размер медиа-запросов на основе элемента div вместо экрана?
Я хотел бы использовать медиа-запросы для изменения размера элементов на основе размера div
элемент, в котором они находятся. Я не могу использовать размер экрана div
просто используется как виджет на веб-странице, и его размер может варьироваться.
обновление
похоже, что сейчас над этим ведется работа: https://github.com/ResponsiveImagesCG/cq-demos
9 ответов:
нет, медиа-запросы не предназначены для работы на основе элементов на странице. Они предназначены для работы на основе устройств или типы носителей (поэтому они и называются СМИ запросы).
width
,height
, и другие размер-основанные характеристики средств все ссылаются к размерам или viewport или экрана прибора в экран-основанных средствах. Они не могут использоваться для ссылки на определенный элемент на странице.Если вам нужно применяйте стили в зависимости от размера определенного
div
элемент на Вашей странице, вы должны будете использовать JavaScript, чтобы наблюдать изменения в размерdiv
элемент вместо медиа-запросы.
Я только что создал оболочку javascript для достижения этой цели. Взгляните, если хотите, это доказательство концепции, но будьте осторожны: это ранняя версия и все еще нуждается в некоторой работе.
медиа-запрос внутри 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 */ }
я столкнулся с той же проблемой пару лет назад и финансировал разработку плагина, чтобы помочь мне в моей работе. Я выпустил плагин как с открытым исходным кодом, так что другие могут извлечь из него пользу, и вы можете захватить его на 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 */ }
Я также думал о медиа-запросах, но потом я нашел это:
- http://www.mademyday.de/css-height-equals-width-with-pure-css.html
- поддерживать соотношение сторон div с CSS
просто создайте обертку
<div>
С процентным значением дляpadding-bottom
, например:div { width: 100%; padding-bottom: 75%; background:gold; /** <-- For the demo **/ }
<div></div>
это приведет к
<div>
С высотой, равной 75% от ширины своего контейнера (соотношение сторон 4:3).этот метод также может быть связан с медиа-запросами и немного специальных знаний о макете страницы для еще более мелкозернистого управления.
этого достаточно для моих нужд. Что может быть достаточно для ваших нужд тоже.