Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno_Ferreira

Alterar proporções de acordo com a resolução do browser

Por , em Javascript

Recommended Posts

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Boa tarde amigos.

 

Tenho um site que contém em sua página principal basicamente, um logo, um menu drop down e um iframe onde é carregado o conteúdo.

Acontece que esse site é visualizado por navegadores de diferentes resoluções e não quero que fique muito pequeno em navegadores de alta resolução e nem grande demais em navegadores de resolução menor, cheguei a usar como valor da prorpiedade width porcentagem (tipo 100%) mas se a janeja for minimizada fica tudo estranho.

 

cheguei a encontrar algumas funções aqui mas ela atua diretamente sobre os elementos html, enquanto o que eu preciso mudar é diretamente na folha de estilos.

Então preciso de uma função que faça isso e eu colocaria no evento onLoad do body.

 

Alguém sabe como eu posso fazer isso?

 

valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você já tentou width: 100% e max-width, e min-width?

 

Assim você controla bem a fluidez do layout. Fora que uma solução totalmente CSS não impede o teu site de rodar corretamente, se o cliente desativar o Javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Como funciona isso? tentei isso aqui embaixo mas não notei diferença alguma:

 

width: 100%;
	max-width: 1275px;
	min-width: 800px;

se eu maximizar ou restaurar a janela dá no mesmo

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Se você não colocar um DOCTYPE o IE vai insistir em renderizar em quirks mode.

Testa isso pra você entender:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>  
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#teste {
	width: 100%;
	max-width: 1275px;
	min-width: 800px;
	background-color: #f0f;
	height: 200px;
	margin: 0 auto; /* centralizar na tela */
}
</style>
</head>
<body>

<div id="teste">
	Notou a diferença ?
</div><!-- /teste -->

</body>
</html>
o DIV vai se expandir até o max-width, e se encolher até o min-width.

Compartilhar este post

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

Informação importante

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

  Aceito