¿Cómo aplicar un media query directamente en un elemento HTML usando CSS?

pedro56 dijo:

Hola [MENTION=11052]spamer01[/MENTION] como lo harías tu!!

Hacer clic para expandir...

• Vinculando un archivo .css externo con la etiqueta <link rel="stylesheet" href="archivo.css">
• Agregando el media dentro de <style>/* Código CSS */</style> en la parte superior de tu documento HTML

<style> [MENTION=16931]medi[/MENTION]a (max-width: 600px){
     .parrafo-demo{
          color: red;
     }
}
</style>

spamer01 dijo:

Tienes dos formas de hacerlo:

• Vinculando un archivo .css externo con la etiqueta <link rel="stylesheet" href="https://forobeta.com/archivo.css">
• Agregando el media dentro de <style>/* Código CSS */</style> en la parte superior de tu documento HTML

Edit: Me olvidaba, como deseas que sea para ese elemento específico, podrías (utilizando cualquiera de las dos formas que te comenté) agregarle una clase <p class="parrafo-demo">Texto del párrafo</p> y hacerle referencia en CSS (si utilizas css externo no debes colocar las etiquetas style):

Insertar CODE, HTML o PHP:

<style> [MENTION=16931]medi[/MENTION]a (max-width: 600px){
     .parrafo-demo{
          color: red;
     }
}
</style>

Hacer clic para expandir...

elfleat dijo:

Si se puede. Redimensiona el cuadro donde sale "Hola mundo" y mira como cambia de color cuando tiene menos de 600 px de ancho.

Edit fiddle - JSFiddle

Hacer clic para expandir...

elfleat dijo:

Si se puede. Redimensiona el cuadro donde sale "Hola mundo" y mira como cambia de color cuando tiene menos de 600 px de ancho.

Edit fiddle - JSFiddle

Hacer clic para expandir...