style - responsive css @media

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

Question

Me gustaría usar las consultas de los medios para cambiar el tamaño de los elementos según el tamaño del elemento div que están. No puedo usar el tamaño de la 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 ahora se está trabajando en esto: https://github.com/ResponsiveImagesCG/cq-demos

Answer 1

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

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

Answer 2

Actualmente, esto no es posible solo con CSS como @BoltClock escribió en la respuesta aceptada, pero puede solucionarlo utilizando JavaScript.

Creé un contenedor de consulta (también conocido como elemento de consulta) prolyfill para resolver este tipo de problema. Funciona un poco diferente a 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 como:

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

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

Answer 3

La única forma en que puedo pensar que puede lograr lo que quiere puramente con css, es usar un contenedor fluido para su widget. Si el ancho de su contenedor es un porcentaje de la pantalla, entonces puede usar las consultas de los medios para diseñar según el ancho de su contenedor, ya que ahora sabrá, para cada dimensión de la pantalla, cuáles son las dimensiones de su contenedor. Por ejemplo, supongamos que decide hacer el 50% del ancho de la pantalla de su contenedor. Luego, 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 */
}

Answer 4

La pregunta es muy vaga. Como dice BoltClock, las consultas de los medios solo conocen las dimensiones del dispositivo. Sin embargo, puede usar las consultas de medios en combinación con los selectores descendentes 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.

Answer 5

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

Hay algunas maneras en que podríamos 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

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

Consultas de altura

• min-height en px
• min-height en %
• altura máxima en px
• altura máxima en %

Contar consultas

• min caracteres
• max caracteres
• 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 sus estilos más específicamente:

• $this (los elementos que coinciden con la consulta)
• $parent (los elementos principales de los elementos que coinciden con la consulta)
• $root (el elemento raíz del documento, <html> )

Las consultas de elementos le permiten componer su diseño a partir de módulos de diseño con respuesta individual, cada uno con un poco de "autoconocimiento" de cómo se muestran en la página.

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

Answer 6

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 denominen consultas de medios ). width , la height y otras funciones de medios basadas en dimensiones se refieren a las dimensiones de la ventana gráfica o de la pantalla del dispositivo en medios basados ​​en pantalla. No se pueden utilizar para referirse a un elemento determinado en una página.

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

Answer 7

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

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

Answer 8

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

• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• Mantener la relación de aspecto de un div con CSS

Simplemente crea un envoltorio <div> con un valor de porcentaje para padding-bottom , como esto:

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

<div></div>

El resultado será un <div> con una altura igual al 75% del ancho de su contenedor (una relación de aspecto 4: 3).

Esta técnica también puede combinarse con consultas de medios y un poco de conocimiento ad hoc sobre el diseño de la página para un control aún más preciso.

Es suficiente para mis necesidades. Lo que podría ser suficiente para sus necesidades también.

Answer 9

Una consulta de medios dentro de un iframe puede funcionar como una consulta de elementos. He implementado exitosamente esto. La idea surgió de una publicación reciente sobre Responsive Ads by Zurb. No Javascript!