Media Query-подобное поведение по ширине определенного div - PullRequest
Новая
       28

Media Query-подобное поведение по ширине определенного div

8 голосов
/ 01 сентября 2011

Я создаю редактор, в котором содержимое поста загружается в div, а селекторы jQuery позволяют мне редактировать контент inline.

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

Я добавлял некоторые медиазапросы для представления.сторона вещей и поняла, что на странице предварительного просмотра что-то вроде @media screen and (max-width: 640px) будет вести себя по-разному, потому что предварительный просмотр не занимает всю ширину экрана.

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

Ответы [ 2 ]

8 голосов
/ 21 ноября 2012

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

0 голосов
/ 06 сентября 2011

Обновление (2018):

Это все еще распространенная проблема для многих разработчиков.Без javascript нет способа запросить размер элемента.Это также очень трудно реализовать в CSS из-за «циклических зависимостей», которые он вызывает (элемент полагается на другой, чтобы определить его размер, запрос элемента вызывает изменение размера в дочернем, что вызывает изменение размера в родительском, что вызывает изменение размера в дочернем ETC ...)

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * .изменения в рамках JavaScript, такие как React или Vue с использованием решения типа «CSSinJS».

Мое старое и веселое «решение»:

Сейчас я использую: 

.preview {
    zoom: .8; 
    -moz-transform: scale(0.8);}

когда div .preview составляет 80% ширины страницы.Обычно он работает, но с некоторыми проблемами, и не совсем гибок, так как рассматриваемые div не всегда будут установлены в% от ширины страницы.

...