Я хотел бы использовать медиа-запросы для изменения размера элементов в зависимости от размера элемента div они находятся. Я не могу использовать размер экрана, поскольку div просто используется как виджет на веб-странице, и его размер может варьироваться.
Похоже, что над этим сейчас ведется работа: https://github.com/ResponsiveImagesCG/cq-demos
Нет, медиа-запросы не предназначены для работы на основе элементов на странице. Они предназначены для работы на основе устройств или типов мультимедиа (следовательно, они называются медиа-запросами). width, height и другие измерения, основанные на носителях, все относятся к размерам экрана просмотра или экрана устройства на экранных носителях. Они не могут использоваться для ссылки на определенный элемент на странице.
Если вам нужно применять стили в зависимости от размера определенного элемента div на вашей странице, вам придется использовать JavaScript для наблюдения за изменениями размера этого элемента div вместо медиа-запросов.
Я только что создал javascript-шайбу для достижения этой цели. Взгляните, если хотите, это доказательство концепции, но позаботьтесь: это ранняя версия и по-прежнему нуждается в некоторой работе.
Запрос на публикацию внутри iframe может работать как запрос элемента. Я успешно реализую это. Идея взята из недавнего сообщения о Откликающих объявлениях от Zurb. Нет Javascript!
В настоящее время это невозможно с помощью CSS, поскольку @BoltClock написал в принятом ответе, но вы можете обойти это с помощью JavaScript.
Я создал запрос контейнера (так называемый запрос элемента) для решения этой проблемы. Он немного отличается от других скриптов, поэтому вам не нужно редактировать HTML-код ваших элементов. Все, что вам нужно сделать, это включить script и использовать его в своем 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%Внутри элементов элемента EQCSS вы также можете использовать три специальных селектора, которые позволяют вам более конкретно применять ваши стили:
$this (элемент (ы), соответствующий запросу)$parent (родительский элемент элемента (ов), соответствующий запросу)$root (корневой элемент документа, <html>)Элементные запросы позволяют составлять ваш макет из индивидуально реагирующих модулей дизайна, каждый из которых имеет немного "самосознания" того, как они отображаются на странице.
С EQCSS вы можете спроектировать один виджет, который будет хорошо выглядеть от 150 пикселей до ширины до 1000 пикселей, тогда вы можете уверенно отбросить этот виджет на любую боковую панель на любой странице, используя любой шаблон (на любом сайте) и
Вопрос очень расплывчатый. Как говорит 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.
Единственный способ, которым я могу думать, что вы можете выполнить то, что вы хотите с помощью 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 */
}
Я тоже думал о медиа-запросах, но потом нашел это:
Просто создайте обертку <div> с процентным значением для padding-bottom, например:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}<div></div>Это работает очень хорошо и является относительно небольшой сборкой (~ 4kb minified) https://github.com/tysonmatanich/elementQuery
Для моего я сделал это, установив div max width, следовательно, для маленького виджета это не будет затронуто, а большой виджет будет изменен из-за стиля max-width.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
С точки зрения макета это возможно с использованием современных методов.
Это сделано (я полагаю) Хейдоном Пикерингом. Он детализирует процесс здесь: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Крис Койер поднимает его и работает над демо здесь: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
Чтобы подтвердить проблему, ниже мы видим 3 одинаковых компонента, каждый из которых состоит из трех оранжевых элементов, помеченных a, b и c.
Вторые два блока отображаются вертикально, потому что они ограничены горизонтальным пространством, а верхние компоненты 3 блока расположены горизонтально.
Для создания этого эффекта используются CSS-свойство flex-basis и CSS-переменные.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Статья Хейдона состоит из 1000 слов, подробно объясняющих ее, и я очень рекомендую ее прочитать.