html - query - ¿Es posible poner CSS @media rules en línea?

media query min and max

Question

Necesito cargar dinámicamente imágenes de banner en una aplicación HTML5 y me gustaría que un par de versiones diferentes se adapten al ancho de la pantalla. No puedo determinar correctamente el ancho de la pantalla del teléfono, por lo que la única forma de hacerlo es agregar imágenes de fondo de un div y usar @media para determinar el ancho de la pantalla y mostrar la imagen correcta.

Por ejemplo:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

¿Es esto posible, o alguien tiene alguna otra sugerencia?

Answer 1

Intenté probar esto y no pareció funcionar, pero tengo curiosidad por saber por qué Apple lo está utilizando. Solo estaba en https://linkmaker.itunes.apple.com/us/ y noté en el código generado que proporciona si selecciona el botón de opción ''Botón grande'', están usando una consulta de medios en línea.

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

nota: se agregaron saltos de línea para facilitar la lectura, se minimiza el código original generado

Answer 2

Las consultas de medios en línea son posibles usando algo como Breakpoint para Sass

Esta publicación de blog hace un buen trabajo explicando cómo las consultas de medios en línea son más manejables que los bloques separados: No hay punto de interrupción

Relacionada con las consultas de medios en línea está la idea de "consultas de elementos", algunas lecturas interesantes son:

1. Reflexiones sobre consultas de medios para elementos
2. Las consultas de medios son un hack
3. Las consultas de medios no son la respuesta: Elemento de consulta Polyfill
4. si otra cosa bloquea

Answer 3

Las consultas de medios en los atributos de estilo no son posibles en este momento. Pero si tienes que configurar esto dinámicamente a través de Javascript. Usted podría insertar esa regla a través de JS también.

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

Esto es como si el estilo estuviera allí en la hoja de estilo. Así que sé consciente de la especificidad.

Answer 4

Los estilos en línea actualmente no pueden contener nada más que declaraciones ( property: value pares de property: value ).

Puede usar elementos de style con atributos de media apropiados en la sección de head de su documento.

Answer 5

No, las reglas de @media y las consultas de medios no pueden existir en los atributos de estilo en línea ya que solo pueden contener declaraciones de property: value . Como la especificación lo pone:

El valor del atributo de estilo debe coincidir con la sintaxis del contenido de un bloque de declaración CSS

La única forma de aplicar estilos a un elemento solo en ciertos medios es con una regla separada en su hoja de estilo, lo que significa que deberá crear un selector para ello.

Un selector de span ficticio se vería así, pero si está apuntando a un elemento muy específico, necesitará un selector más específico:

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}

Answer 6

Puede utilizar conjunto de imágenes ()

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">

Answer 7

Sí, puede escribir consultas de medios en inline-css si está utilizando una etiqueta de imagen. Para diferentes tamaños de dispositivos puedes obtener diferentes imágenes.

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Answer 8

Si agrega la regla al archivo print.css, no tiene que usar @media.

Lo descarté en el smarty foreach que uso para dar a algunos elementos un color de fondo.

<script type=''text/javascript''>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>

Answer 9

Si está utilizando Bootstrap Responsive Utilities o una alternativa similar que le permite ocultar / mostrar divs dependiendo de los puntos de ruptura, puede ser posible usar varios elementos y mostrar los más apropiados. es decir

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

Answer 10

Hola, acabo de escribirlo.

Ahora puede usar <div style="color: red; @media (max-width: 200px) { color: green }"> o menos.

Disfrutar.

Answer 11

Problema

No, las consultas de medios no se pueden utilizar de esta manera

<span style="@media (...) { ... }"></span>

Solución

Pero si desea que se proporcione un comportamiento específico que se pueda utilizar al vuelo y que responda, puede usar el marcado de style y no el atributo.

ei

<style scoped>
.on-the-fly-behavior {
    background-image: url(''particular_ad.png''); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url(''particular_ad_small.png'');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

Ver el código trabajando en vivo en CodePen

En mi Blog, por ejemplo, inyecto una marca <style> en <head> justo después de la declaración <link> para CSS y contiene el contenido de un área de texto que se incluye al lado del área de texto de contenido real para crear clases extra al vuelo cuando escribí un artitulo

Nota: el atributo de scoped es una parte de la especificación HTML5. Si no lo usa, el validador lo culpará, pero los navegadores actualmente no admiten el propósito real: abarcan el contenido de <style> solo en el elemento primario inmediato y en los elementos secundarios de ese elemento. El ámbito no es obligatorio si el elemento <style> está en el marcado <head> .

ACTUALIZACIÓN: aconsejo usar siempre las reglas en el dispositivo móvil de forma primera, por lo que el código anterior debe ser:

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url(''particular_ad_small.png''); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url(''particular_ad.png'');
    }
}
</style>
<span class="on-the-fly-behavior"></span>