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

  • Autor Autor pedro56
  • Fecha de inicio Fecha de inicio
pedro56

pedro56

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
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í?
 
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
 
Hola [MENTION=11052]spamer01[/MENTION] como lo harías tu!!
 
pedro56 dijo:
Hola [MENTION=11052]spamer01[/MENTION] como lo harías tu!!
Hacer clic para expandir...

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>
 
Última edición:
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
 
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...

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

Saludos!
 
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...

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
 
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...

Exactamente como menciona el compañero, creo que aquí lo que se pregunta en particular es el método que se quiere emplear.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba