Get best of the week

Fonte responsiva. Adaptar texto entre layout e valores mínimos

Fonte responsiva ou responsiva é o sonho de qualquer desenvolvedor web. Revisei muitas opções de implementação, sentei-me à noite e criei uma opção de trabalho confiável. Eu quero compartilhar isso com você. Bônus SCSS Mixin!


Então o desafio. Indique o valor de acordo com o layout, bem como o valor mínimo no qual o texto ou título ficaria bom em dispositivos móveis, por exemplo, iPhone 5 (320px). Nesse caso, a fonte se adaptaria, aumentando ou diminuindo, dependendo da largura da tela.

Pegamos os valores iniciais do layout, por exemplo, o cabeçalho H1 com um tamanho de 40px. Também precisamos da largura de todo o layout da tela, por exemplo, 1280px.



Para obter o valor mínimo da fonte, criamos o cabeçalho de acordo com o layout e, usando as ferramentas de desenvolvedor do Chrome (F12), selecionamos o tamanho mínimo de tela desejado e o tamanho da fonte, alterando o valor até o texto parecer adequado. Eu tenho 24px



depois em CSS, em vez do tamanho da fonte: 40px; escreva o seguinte.

font-size: calc(24px + 16 * (100vw / 1280));

Onde 24px é a fonte mínima, 16 é a diferença entre a fonte no layout 40 e a fonte mínima em 24 (40-24 = 16). 100vw é a largura atual completa da janela de visualização (tela); 1280 é a largura do layout.

Testamos e obtemos uma fonte responsiva que corresponde totalmente ao tamanho do layout.

Porém, no tamanho de 320px, não veremos o resultado desejado, ou seja, uma fonte de 24px. Isso se deve ao fato de não especificarmos o tamanho mínimo da tela em exatamente 320px.



Para resolver a situação, escreva uma consulta de mídia para 767px e, dentro dela, alteramos a fórmula:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Aqui subtraímos 320 pixels da largura total da janela de visualização e, ao adicionar um número adicional de 16, adicionamos 70% (16 + 16 * 0,7)

.Verificamos e observamos a total conformidade com a tarefa! Ao mesmo tempo, a transição para o ponto de interrupção é feita sem problemas e de maneira notável!

Obviamente, podemos fechar tudo isso no mix do SCSS:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

E conecte da seguinte maneira:

h1{
 @include adaptiv-font(40, 24);
}


Você pode se livrar completamente da consulta de mídia:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Ficarei feliz em ler nos comentários de que outra forma essa solução pode ser aprimorada. Obrigado pela atenção!

Com base nos materiais do vídeo " Fonte Adaptativa. Um exemplo da implementação de uma fonte responsiva (borracha) no CSS + SCSS mixin " No canal do YouTube " Freelancer for Life "

More articles:


All Articles