Ir para conteúdo

POWERED BY:

Arquivado

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

Marcos Junior

Aumentar / Diminuir tamanho de fonte

Recommended Posts

Como posso aumentar e diminuir o tamanho da fonte dos textos de acordo com o redimensionamento da janela do browser?

 

Como faço isso com javascript?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você quer fazer isso automaticamente ou quer que o usuário decida se quer diminuir ou aumentar o tamanho da fonte no texto?

Compartilhar este post


Link para o post
Compartilhar em outros sites

você quer fazer isso automaticamente ou decidir que o usuário aumente ou diminua o tamanho da fonte no texto?

 

Tem que ser automático. Sempre que o usuário redimensionar o browser ou mudar a resolução do monitor, automaticamente o texto tem que mudar de tamanho.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Marcos Junior só consegui pensar nisso:

 

script

 

	<script type="text/javascript">

		window.onload = function() {

			var tag, aumentar, diminuir, PADRAO;

			PADRAO   = 16;
			tag      = window.document.getElementById( 'texto' );
			aumentar = window.document.getElementById( 'aumentar' );
			diminuir = window.document.getElementById( 'diminuir' );

			aumentar.onclick = function() {

				if ( PADRAO == 20 ) {
					tag.style.fontSize = 20;

				} else {
					tag.style.fontSize = ++PADRAO;
				}
			}

			diminuir.onclick = function() {

				if ( PADRAO == 16 ) {
					tag.style.fontSize = 16;

				} else {
					tag.style.fontSize = --PADRAO;
				}
			}
		}

	</script>

 

html

 

<input id="aumentar" type="submit" value="Aumentar" />
<input id="diminuir" type="submit" value="Dimunuir" />

<p id="texto">Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p>

 

PS: Sou noob em js.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode usar tanto responsive web design e as Media Queries do CSS3 como fazer uma if que detecta a resolução do monitor e uma função que diminuia ou aumente o tamanho da letra conforme cada uma delas com Javascript.

 

Por exemplo:

     if (screen.width >= "1024") {  

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esses códigos são muito pró! Mas eu preciso fazer isso automaticamente.

 

O usuário redimensiona a janela do browser e o texto muda de tamanho automaticamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como posso aumentar e diminuir o tamanho da fonte dos textos de acordo com o redimensionamento da janela do browser?

redimensionamento com Ctrl e +(mais) ou -(menos) ?

 

ou puxando as bordas da janela ?

existe um evento chamado window.onresize, porém preciso entender oque você está realmente querendo.

 

Visto que pode nem ser necessário, já que no Ctrl +, o próprio browser já altera o tamanho da fonte, junto com o resto do layout.

Compartilhar este post


Link para o post
Compartilhar em outros sites

A alteração do tamanho das fontes deve ocorrer quando o usuário puxar as bordas das janelas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então use o evento window.onresize, para disparar a tua função que altere a propriedade .style.fontSize dos elementos em que você quer mexer.

 

exemplo:

http://wbruno.com.br/blog/2011/12/07/alterando-tamanho-de-fonte-resize-da-janela-javascript/

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.