📣 Seu anúncio aqui? Anuncie no ForoBeta

Como aplicar um media query diretamente em um elemento HTML usando CSS?

  • Autor Autor pedro56
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
pedro56

pedro56

Zeta
Verificación en dos pasos activada
Usuário popular!
Hola betas.

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

Inserir CODE, HTML ou 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í?
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
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 disse:
Hola [MENTION=11052]spamer01[/MENTION] como lo harías tu!!
Clique 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):
Inserir CODE, HTML ou PHP: 
<style> [MENTION=16931]medi[/MENTION]a (max-width: 600px){
     .parrafo-demo{
          color: red;
     }
}
</style>
 
Última edição:
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 disse:
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):
Inserir CODE, HTML ou PHP: 
<style> [MENTION=16931]medi[/MENTION]a (max-width: 600px){
     .parrafo-demo{
          color: red;
     }
}
</style>
Clique 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 disse:
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
Clique 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 disse:
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
Clique 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.
 
Você precisa estar logado ou cadastrado para responder aqui.
Voltar
Topo