Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

moacyrcavallo

Declaração de media Query

Por , em Desenvolvimento frontend

Recommended Posts

moacyrcavallo    0

moacyrcavallo
Postado
<body>

<div> <img src="/images/principal.png" style=" width: 90%; height: auto; max-width:590px; max-height:450px;" style="@media screen and (max-width: 780px) {width:100; height:auto;}"/> </div>


Preciso fazer a definiçã de uma imagem e gostaria de saber como é a forma correta de definir uma media query direto no html pois da forma que fiz ela n funciona.

Isso é de uma loja virual que eu não tenho acesso a todo o html e por isso a declaração teria q ser feita assim.


Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Santos Brito    12

Lucas Santos Brito
Postado

Media queries não funcionam dentro de um atributo, deve ser declarado dentro de uma folha de estilos (.css) ou até mesmo de uma tag <style>, além do mais você declarou o atributo mais de uma vez.

Ainda que funcionasse a sua declaração foi feita de forma incorreta, você chamou a media querie e logo depois definiu propriedades sem referenciar nenhum elemento, o que faria do código inválido.

 

Já que não tem acesso a folha de estilos, sugiro que abra uma tag <style> dentro da tag <head>, defina uma classe para a imagem e utilize-a como referência para definir as propriedades.

<html>
<head>
<meta charset="utf-8">
<title>Sua Pagina</title>
<style>
.minha-imagem {
  width:90%;
  height:auto;
  max-width:590px;
  max-height:450px;
}
@media (max-width:780px){
  .minha-imagem {
    width:100%;
    height:auto;
  }
}
</style>
</head>
<body>
  <div>
    <img src='/images/principal.png'>
  </div>
</body>
</html>

Sugiro também dar uma lida sobre 'Mobile First'.

Espero ter ajudado, abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

moacyrcavallo    0

moacyrcavallo
Postado

Lucas, já tentei fazer isso e o unico problema é que o sistema de e-commerce que tenho q trabalhar é HORRÍVEL. e fazendo isso ele declara TODAS AS IMAGENS como o width. Mesmo colocando um id na declaração da imagem ele não vai. Vou ter que tentar fazer de outra forma entao pq tentei fazer com css, jquery e direto no html!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito