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

Question

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

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

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

32

jquery css css3 media-queries

Источник

user1838651 23 янв '13 в 09:12

3 ответа

Другие вопросы по тегам jquery css css3 media-queries

user2529635 01 июл '13 в 15:56 2013-07-01 15:56 · Answer 1 · 2013-07-01 15:56

Я тоже изучал это. До сих пор я был впечатлен подходом Энди Хьюма http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/

7

Источник

user2529635 01 июл '13 в 15:56

user1225755 23 янв '13 в 13:42 2013-01-23 13:42 · Answer 2 · 2013-01-23 13:42

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

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

user517914 23 янв '13 в 13:41 2013-01-23 13:41 · Answer 3 · 2013-01-23 13:41

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

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

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

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

Вы объявляете, какой элемент и какая опция должна быть переходной. Вот пример, где я настраиваю, что изменение ширины или поля элемента запускает анимацию, которая занимает 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, называемого transition.

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

К вашему сведению: я перестроил что-то вроде веб-сайта, который вы показали, просто в качестве подтверждения концепции: http://jsfiddle.net/W3PF4/