¿Pueden las consultas de medios cambiar el tamaño en función de un elemento div en lugar de la pantalla?

Me gustaría usar consultas de medios para cambiar el tamaño de los elementos en función del tamaño de un elemento div que se encuentren. No puedo usar el tamaño de pantalla ya que el div solo se usa como un widget dentro de la página web, y su tamaño puede variar.

Actualizar

Parece que se está trabajando en esto ahora: https://github.com/ResponsiveImagesCG/cq-demos

No, las consultas de medios no están diseñadas para funcionar en función de los elementos de una página. Están diseñados para funcionar en función de dispositivos o tipos de medios (de ahí que se los denomine consultas de medios ). width , height y otras características de medios basadas en dimensiones se refieren a las dimensiones de la ventana gráfica o del dispositivo en medios basados ​​en pantalla. No se pueden usar para referirse a un determinado elemento en una página.

Si necesita aplicar estilos según el tamaño de un elemento div determinado en su página, deberá usar JavaScript para observar los cambios en el tamaño de ese elemento div lugar de las consultas de medios.

Acabo de crear un shim de Javascript para lograr este objective. Eche un vistazo si lo desea, es una prueba de concepto, pero tenga cuidado: es una versión anterior y todavía necesita algo de trabajo.

https://github.com/marcj/css-element-queries

Una consulta de medios dentro de un iframe puede funcionar como una consulta de elementos. Implementé esto exitosamente. La idea surgió de una publicación reciente sobre Anuncios receptivos de Zurb. ¡Sin Javascript!

Esto no es posible actualmente con CSS solo ya que @BoltClock escribió en la respuesta aceptada, pero puede solucionarlo usando JavaScript.

Creé una consulta de contenedor (también conocida como consulta de elemento) prolyfill para resolver este tipo de problema. Funciona un poco diferente que otros scripts, por lo que no tiene que editar el código HTML de sus elementos. Todo lo que tienes que hacer es incluir el script y usarlo en tu CSS de esta forma:

 .element:container(width > 99px) { /* If its container is at least 100px wide */ } 

https://github.com/ausi/cq-prolyfill

Me encontré con el mismo problema hace un par de años y financió el desarrollo de un complemento para ayudarme en mi trabajo. Lancé el complemento como de código abierto para que otros puedan beneficiarse de él también, y puedes obtenerlo en Github: https://github.com/eqcss/eqcss

Hay algunas maneras en que podemos aplicar diferentes estilos de respuesta en función de lo que podemos saber sobre un elemento en la página. Aquí hay algunas consultas de elementos que el complemento EQCSS le permitirá escribir en 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 */ } } 

Entonces, ¿qué condiciones son compatibles con los estilos de respuesta con EQCSS?

Consultas de peso

  • min-ancho en px
  • min-ancho en %
  • ancho máximo en px
  • ancho máximo en %

Consultas de altura

  • min-altura en px
  • altura mínima en %
  • altura máxima en px
  • altura máxima en %

Cuente consultas

  • min-characters
  • max-characters
  • líneas mínimas
  • lineas maximas
  • min-niños
  • max-children

Selectores especiales

Dentro de las consultas de elementos de EQCSS también puede usar tres selectores especiales que le permiten aplicar más específicamente sus estilos:

  • $this (el elemento (s) que coincide con la consulta)
  • $parent (los elementos principales del elemento (s) que coinciden con la consulta)
  • $root (el elemento raíz del documento, )

Las consultas de elementos le permiten componer su diseño a partir de módulos de diseño receptivos individualmente, cada uno con un poco de ‘autoconciencia’ de cómo se muestran en la página.

Con EQCSS puede diseñar un widget para que se vea bien desde 150 píxeles de ancho hasta 1000 píxeles de ancho, luego puede colocar con confianza ese widget en cualquier barra lateral de cualquier página usando cualquier plantilla (en cualquier sitio) y

La pregunta es muy vaga Como dice BoltClock, las consultas de los medios solo conocen las dimensiones del dispositivo. Sin embargo, puede usar consultas de medios en combinación con selectores de descensor para realizar ajustes.

 .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; } } 

La única otra solución requiere JS.

La única forma en que puedo pensar que puedes lograr lo que quieres puramente con CSS es usar un contenedor de fluido para tu artilugio. Si el ancho de su contenedor es un porcentaje de la pantalla, entonces puede usar las consultas de los medios de acuerdo con el ancho de su contenedor, ya que ahora sabrá para las dimensiones de cada pantalla cuáles son las dimensiones de su contenedor. Por ejemplo, supongamos que decides hacer que tu contenedor tenga el 50% del ancho de la pantalla. Entonces, para un ancho de pantalla de 1200px, sabe que su contenedor es de 600px

 .myContainer { width: 50%; } /* you know know that your container is 600px * so you style accordingly */ @media (max-width: 1200px) { /* your css for 600px container */ } 

También estaba pensando en consultas de medios, pero luego encontré esto:

Solo crea un contenedor

con un valor porcentual para padding-bottom de padding-bottom , como este:

 div { width: 100%; padding-bottom: 75%; background:gold; /** <-- For the demo **/ } 
 

Para el mío, lo hice estableciendo el ancho máximo del div, por lo tanto, para un pequeño widget no se verá afectado y el widget grande se redimensionará debido al estilo de ancho máximo.

  // assuming your widget class is "widget" .widget { max-width: 100%; height: auto; }