Подтвердить что ты не робот

CSS3 Media Query - Ширина контейнера, а не экрана?

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

http://tympanus.net/Tutorials/FullscreenBookBlock/

4b9b3361

ОТВЕТЫ

Ответ 2

Я думаю, вам нужно что-то другое, чем то, о чем вы просите.

Медиа-запросы предназначены для запроса чего-то определенного для используемого устройства (носителя), а не для анимации или другого визуального материала.

Чтобы перестроить приведенный здесь пример, достаточно просто перестроить, но имеет (за исключением его отзывчивости) ничего общего с медиа-запросами.

Они создали обычную страницу с двумя состояниями. В одном состоянии отображается только контент, а в другом состоянии отображается меню, а часть частично (взята по ширине меню) выведена из экрана.

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

div {
  transition: width 3s, margin 3s;
  -moz-transition: width 3s, margin 3s;
  -webkit-transition: width 3s, margin 3s;
  -o-transition: width 3s, margin 3s;
}

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

Я рекомендую читать что-то вроде https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI: Я перестраиваю что-то вроде сайта, который вы показали, как доказательство концепции: http://jsfiddle.net/W3PF4/

Ответ 3

Нет, вы не можете запросить медиа-запрос таким образом, но то, что вы просите, можно сделать с помощью css. Я делаю это для своего веб-сайта, а ребята в sitepoint немного помогли - см. Пост 11 здесь: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986

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