Ir para conteúdo

Arquivado

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

Thiago Nunes

Media Query só funciona após atualizar a página

Recommended Posts

Olá pessoal,

 

Estou desenvolvendo um site responsivo no WordPress, e ocorre que a media query só está funcionando após atualizar o browser. Por exemplo: quando altero a visualização de 1440px para 768, a formatação aplicada para essa resolução só funciona após atualizar a página, o mesmo ocorre para o caminho inverso.

 

PS: Tentei incluir o css de 3 formas:

 

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 768px)" href="<?php bloginfo( 'template_directory' ); ?>/css/estilo-tablets.css" />

 

<link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="<?php bloginfo( 'template_directory' ); ?>/css/estilo-tablets.css" />

 

E usando media query na folha de estilo principal, conforme segue abaixo:

@media screen and (max-width: 444px) {
    .meu-estilo { border: solid red 1px; height: 111px; width: 289px }

}

Alguém sabe como contornar o problema?

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei o que está acontecendo, porque aqui tbm utilizo @media e ela vai quebrando o site automaticamente quando redireciono a janela..

Compartilhar este post


Link para o post
Compartilhar em outros sites

Buenas tchê.

 

Se você está redimensionando a janela do navegador, as media queries deveriam funcionar direto.

Caso você esteja usando o emulador de devices do Chrome, será necessário mesmo fazer o refresh, pois não é enviada apenas a informação de viewport, mas de deviceRatio, etc...


Você lembrou de colocar a metatag viewport no header??

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Marlon, tudo bem?

 

É esta tag que você se refere: <meta name="viewport" content="width=device-width">?

 

Descobri a causa do problema, os elementos que não estão sofrendo alteração no redimensionamento são as fontes que utilizei cufon. Além disso, a troca dos estilos passou a funcionar melhor depois que inclui as folhas de estilo separadas por viewport, conforme segue abaixo:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1024px)" href="<?php bloginfo( 'template_directory' ); ?>/css/estilo-tablets-1024.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 768px)" href="<?php bloginfo( 'template_directory' ); ?>/css/estilo-tablets-768.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" href="<?php bloginfo( 'template_directory' ); ?>/css/estilo-smartphones-320.css" />

Será que existe alguma solução para o problema das fontes cufon?

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa, blz.

 

Dá uma olhada nisso (http://stackoverflow.com/questions/5791940/resizing-cufon-with-media-queries) e veja se te ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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