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

pedro56 · 28 May 2019

Hola betas.

Quisiera colocar un media query para un elemento especifico directamente en el HTML, seria algo así:

Insertar CODE, HTML o PHP:

<p style="@media (max-width: 600px) color:red">hola mundo</p>

Hay lo que pretendo hacer es colocar directamente el media query en el elemento html 'p', colocando de color rojo el texto 'hola mundo' cuando el tamaño de pantalla este entre 0 a 600px.

Es posible hacer algo así?

marco28r · 28 May 2019

no se puede según stackoverflow CSS media rules inline

spamer01 · 28 May 2019

No entiendo, por qué colocarlo ahí...
En caso de que sea una condición, puedes imprimir arriba de ese párrafo un style con el media

pedro56 · 28 May 2019

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

spamer01 · 28 May 2019

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

Tienes dos formas de hacerlo:

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

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>

elfleat · 28 May 2019

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

Federico99 · 28 May 2019

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>

Yo lo haría igual.
[MENTION=44861]pedro56[/MENTION] por algún motivo necesitas hacerlo como tú pides? Es medio extraño.

Saludos!

spamer01 · 28 May 2019

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

Claro que se puede hacer de la forma que tú lo hiciste, pero no como él remarca en el mensaje original ya que intenta integrar el media dentro de una propiedad style de la misma etiqueta p

Programarte · 28 May 2019

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

Exactamente como menciona el compañero, creo que aquí lo que se pregunta en particular es el método que se quiere emplear.