jquery - todos - CSS3 Media Query-¿Ancho de contenedor en lugar de pantalla?
media query height (3)
Creo que quieres algo diferente de lo que estás pidiendo.
Las consultas de medios tienen por objeto consultar algo específico del dispositivo (medios) que utiliza, no hacer animaciones u otras cosas visuales.
Reconstruir el ejemplo que publicó aquí es bastante fácil de reconstruir, pero (salvo por su capacidad de respuesta) no tiene nada que ver con las consultas de los medios.
Crearon una página normal, teniendo dos estados. En un estado, solo el contenido es visible y en el otro estado, el menú es visible y el contenido es parcialmente (tomado del ancho del menú) movido fuera de la pantalla.
Usted declara qué elemento y qué opción debe ser transicional. Aquí hay un ejemplo, donde configuro ese ancho o margen de cambio de un elemento para comenzar una animación que toma 3 segundos:
div {
transition: width 3s, margin 3s;
-moz-transition: width 3s, margin 3s;
-webkit-transition: width 3s, margin 3s;
-o-transition: width 3s, margin 3s;
}
La conmutación entre estos dos estados se realiza agregando una clase css y la animación que se ve se configura mediante una configuración de CSS3 llamada transición .
Recomiendo leer algo como https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
FYI: reconstruyo algo como el sitio web que mostraste, solo como una prueba de concepto: http://jsfiddle.net/W3PF4/
Todavía no he visto esta pregunta aquí, pero me preguntaba si alguien sabe si es posible tener una consulta de medios basada en un contenedor o elemento padre que se basó en su ancho. El caso del usuario para esto es cuando tiene un menú que aparece desde la izquierda y disminuye el tamaño del contenedor de ventanas principal. Aquí hay un sitio web de ejemplo donde puede ver que se abren los menús, pero el contenido de la página no puede cambiar en función de su nuevo ancho
He estado investigando esto también. Hasta el momento, me ha impresionado el enfoque de Andy Hume http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/
No, no puede consultar los medios de esa manera, pero lo que está pidiendo se puede hacer con css. Lo he estado haciendo para mi sitio web y los de sitepoint han ayudado bastante. Consulte la publicación 11 aquí: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986
Cuando la barra lateral se abre, aplasta el contenido a la derecha y se encuentra dentro de los centros de contenido. Por supuesto, puedes hacer esto sin el contenido centralizado y hará lo que pretendes.