¿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 media queries para cambiar el tamaño de los elementos en función del tamaño de un elemento div en el que se encuentran. 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 se está trabajando en esto ahora: https://github.com/ResponsiveImagesCG/cq-demos
9 answers
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 base a dispositivos o tipos de medios (de ahí por qué se llaman consultas de medios). width, height, y otras funciones de medios basadas en dimensiones se refieren a las dimensiones de la ventana o de la pantalla del dispositivo en medios basados en pantalla. No se pueden utilizar para referirse a un determinado elemento de una página.
Si necesita aplicar estilos dependiendo del tamaño de un cierto elemento div en su página, tendrá que usar JavaScript para observar los cambios en el tamaño de ese elemento div en lugar de consultas de medios.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-10 02:23:33
Acabo de crear una cuña javascript para lograr este objetivo. Echa un vistazo si quieres, es una prueba de concepto, pero ten cuidado: es una versión temprana y todavía necesita un poco de trabajo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-02 03:29:27
Una consulta de medios dentro de un iframe puede funcionar como una consulta de elementos. He implementado esto con éxito. La idea surgió de un post reciente sobre Responsive Ads de Zurb. Sin Javascript!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 19:25:53
Esto no es posible actualmente con CSS solo como @BoltClock escribió en la respuesta aceptada, pero puede trabajar alrededor de eso mediante el uso de JavaScript.
Creé una consulta de contenedor (también conocida como consulta de elemento) prolyfill para resolver este tipo de problema. Funciona un poco diferente a otros scripts, por lo que no tienes que editar el código HTML de tus elementos. Todo lo que tienes que hacer es incluir el script y usarlo en tu CSS de la siguiente manera:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-30 06:39:07
Me encontré con el mismo problema hace un par de años y financié el desarrollo de un plugin para ayudarme en mi trabajo. He lanzado el plugin como de código abierto para que otros puedan beneficiarse de él, así, y se puede agarrar en Github: https://github.com/eqcss/eqcss
Hay algunas maneras en que podríamos aplicar diferentes estilos responsivos basados en lo que podemos saber sobre un elemento en la página. Aquí hay algunas consultas de elementos que el complemento EQCSS le permitirá escribir 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 responsivos con EQCSS?
Consultas de peso
- min-ancho en
px - min-ancho en
% - max-width in
px - max-width in
%
Consultas de altura
- min-altura en
px - min-altura en
% - altura máxima en
px - altura máxima en
%
Cuenta Consultas
- min-caracteres
- max-characters
- min-lines
- max-lines
- min-niños
- max-niños
Selectores especiales
Dentro de las consultas de elementos EQCSS también puede usar tres selectores especiales que le permiten aplicar más específicamente sus estilos:
-
$this(los elementos que coinciden con la consulta) -
$parent(el (los) elemento (s) padre (s) del(de los) elemento (s) query) -
$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 de respuesta individual, 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 150px de ancho hasta 1000px de ancho, luego puede colocar con confianza ese widget en cualquier barra lateral en cualquier página utilizando cualquier plantilla (en cualquier sitio) y
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-12 19:26:12
La pregunta es muy vaga. Como dice BoltClock, las consultas de medios solo conocen las dimensiones del dispositivo. Sin embargo, puede utilizar media queries en combinación con selectores de descenso 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-07 17:49:13
La única forma en que puedo pensar que puedes lograr lo que quieres puramente con css, es usar un contenedor fluido para tu widget. Si el ancho de su contenedor es un porcentaje de la pantalla, puede usar media queries para diseñar según 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, digamos 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 is 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 */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-17 09:05:29
También estaba pensando en consultas de 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 una envoltura <div> con un valor porcentual para padding-bottom, así:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}<div></div>Resultará en 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 se puede combinar 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 fino.
Es suficiente para mis necesidades. Que podría ser suficiente para sus necesidades también.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-30 23:46:37
Para el mío lo hice estableciendo el ancho máximo del div, por lo tanto, para el 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-24 08:33:34