Você já deve ter desenhado uma página web que ficou muito bem numa tela grande como a de um computador e a mesma página ficou horrível num celular porque tudo ficou fora do lugar, um item colidiu com outro e não dá pra saber onde começa um termina o outro. E, para adiantar, isso ocorreu porque o browser é responsivo.
Outro problema é quando fazemos a exibição de dados numa tela e ao exibir o mesmo documento no celular as fontes de letras ficaram tão pequenas que simplesmente não dá pra ler.
E quando a gente faz um menu da hora mas a tela do celular é tão pequena que não dá para exibir o menu numa linha e com a quebra o menu ficou realmente muito ruim...os elementos parecem 'mixados' e é difícil discernir qual é o da linha de cima e o da linha de baixo.
Com certeza dimensionar os elementos num documento html é um problema...se fica bom numa tela grande pode ser que numa tela pequena fique muito ruim e vice-versa.
E se tivéssemos um maneira de dimensionar os elementos da página dependendo da tela de exibição do browser ??? Isto é feito por um recurso chamado 'responsividade'.
Página responsiva é toda a página que dependendo das dimensões da tela onde o browser está sendo exibido ele 'dimensiona' os elementos da página de acordo com esse 'tamanho' de tela.
Com este recurso se a tela do browser tem mais de 1000 pixels de largura o programador pode dimensionar a fonte de uma tag h1 para 25 pixels, mas se a tela só tem 750 pixels mudar essa fonte h1 para 20 pixels e se a tela for ainda menor apenas 15 pixels de largura.
Tenha em foco que fazer uma página responsiva dá muito mais trabalho que uma página normal porque você vai ter que testar e ajustar a tela para cada largura informada e devemos ter cuidado para não fazer a página responsiva ficar pior que a mesma página normal ( sem ser responsiva ).
Normalmente escolhemos em quais itens desejamos aplicar essa 'responsividade' e o browser se encarrega dos demais.
Para botar esse 'conceito' em funcionamento temos 2 pontos importantes, os break-points e como fazemos os testes para verificar se visualmente ficou bom.
Break-points são os pontos chaves onde o efeito é aplicado. Por exemplo, quando a tela tem mais de 750 pixels ou quando a tela tem menos de 750 pixels podemos aplicar um ou uma série de estilos aos elementos de uma pagina.
Quando a condição informada no break-point é atingida podemos definir um ou um conjunto de estilo para cada tag da página ou só daquelas que desejamos alterar o formato de acordo com a tela.
No seu computador o jeito mais fácil é mudar a largura da tela do browser seja ele Edge, Chrome ou outro qualquer. Basta deixar a tela do browser no modo 'não maximizado' e com o mouse clicar na margem direita ( o cursor vira uma seta com pontas para direita e esquerda ) e arrastar ela para alterar a largura de acordo com o que desejamos.
Você vai ver que por definição o browser é responsivo, se uma mensagem inteira não cabe na linha corrente ele
exibe o que não couber na próxima linha. Mas numa página normal se um texto tem 20 pixels ele sempre será exibido com
esse tamanho a não ser algumas tags como os headers que tem um tamanho de fonte de letra para cada largura de tela
definida no próprio browser. Como disse
Responsivo significa mudar as características do elemento de acordo
com o tamanho da página
e, normalmente o browser já faz isso mas nem sempre fica do jeito que queremos.
Contudo algumas vezes precisamos dar uma 'ajudinha' ao browser para dar o efeito que desejamos ao elemento.
O ponto chave do site responsivo é a aplicação de um estilo dependente do tamanho da página e isto é feito por um recurso da css chamado 'media-queries '.
Quando estamos visualizando um browser não é exibida as dimensões da tela e isso é um ponto chave para saber se o break-point foi aplicado ou não.
Temos 2 recursos no JavaScript que exibem o tamanho da tela : window e screen. Window é a tela de exibição completa enquanto que screen é apenas a região útil da tela, ou seja, o window removendo margens, paddings entre outras coisas que retiram o espaço aproveitável de exibição do conteúdo da página.
Para exibir esses valores que nos guiarão na construção da página responsiva colei no rodapé da página 4 caixas de texto que são atualizadas ao entrar na página e sempre que mudamos a largura da página.
Window : Altura : Window : Largura :
Como fiz o exemplo acima:
1-Criei 2 tags para exibir os valores:
<p class="rodape">
Window : Altura : <input type="text" id="windowaltura" />
Window : Largura : <input type="text" id="windowlargura" />
</p>
2-Um estilo para amarrar a exibição no rodapé da página:
<style>
.rodape {
position:fixed;
bottom: 0;
left:100px;
right:100px;
background-color: blue;
color: #FFF;
text-align: center;
}
</style>
3-Um script para exibir os valores:
<script>
function TamTela() {
var windowLargura = window.innerWidth;
var windowAltura = window.innerHeight;
document.getElementById("windowaltura").value = windowAltura;
document.getElementById("windowlargura").value = windowLargura;
</script>
4-Um script para exibir os valores ao carregar a página:
<script>TamTela();</script>
5-Um script para exibir os valores quando a página é redimensionada:
<body style="font-family:arial;background-color:#d8eaf8;" onresize="TamTela()">
O media querie tem seus break-points definidos de 2 maneiras : Ou min-width ou max-width.
O min-width e aplicado quando a tela é maior que o parâmetro especificado. Por exemplo se eu criar um media querie do tipo min-width:800px significa que se a tela tive 800 pixels ou mais o efeito será aplicado.
Já quando usamos o max-width o efeito é aplicado até que a ela tenha o tamanho especidificado no parâmetro
Note que por sí só a tag h1 é responsiva. Redimensione a largura da tela e veja como o tamanho da fonte do h1 é alterado de acordo com a largura da tela. Note também que o resultado é homogêneo, ou seja, não há alterações bruscas no tamanho do texto...a coisa é feita bem suavemente.
No exemplo acima da tag h2 eu fiz o efeito ao contrário do que normalmente fazemos, quando a tela tiver menos que 1.300 pixels ele irá ampliar a fonte de letras para 155 px. Redimensione a largura da tela e veja o efeito.
Código
@media (max-width: 1300px) {
h2 {
font-size: 155px;
}
}
Ficou péssimo mas a intenção e mostrar como aplicar o efeito e de uma maneira gritante deixa menos dúvidas.
Note que o termo para a aplicação do media querie é meio confuso. Na css acima definimos '@media (max-width: 1300px)' o que significa se a tela tiver MENOS de 1300 pixels o item será aplicado.
'@media (max-width: numpx)' é aplicado quando a lagura da tela é menor que numpx.
'@media (min-width: numpx)' é aplicado quando a lagura da tela é maior que numpx.
Importante : podemos mixar as propriedades acima como '@media (max-width: numpx) and '@media (min-width: numpy)'. Não costumo usar esse recurso porque fica complexo demais e dificulta muito a aplicação do recurso.
Uma das piores coisas que ficam em telas de diferentes tamanhos é um menu. Se você faz para o computador fica péssimo num celular e se você faz para o celular fica péssimo para um micro com tela grande.
No exemplo acima temos um típico menu que fica bem tanto em celulares como em telas grandes
Código
O menu em si:
<div class="container">
<ul id="navegacao">
<li class="home primeiro"><a href="#">Home</a></li>
<li class="sobre"><a href="#">Sobre</a></li>
<li class="servicos"><a href="#">Serviços</a></li>
<li class="noticias"><a href="#">Notícias</a></li>
<li class="contato"><a href="#">Contato</a></li>
</ul>
</div>
Os estilos aplicados:
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
background: #159cb0 url('imagens/fundo-horizontal.png') repeat-x; /*repeat-x = repete só na horizontal*/
display: flex;
justify-content: center;
align-items: center;
}
ul li {
float: left; /*coloca o menu na horizontal*/
margin: 1px; /*magem entre os itens li e a borda da ul*/
padding: 1px;
}
ul a {
/*border: 1px solid red;*/
display: block;
padding: 0 2em;
line-height: 2em;
text-decoration: none;
color: #fff;
/*border-left: 1px solid red;*/
background: url('imagens/divisor.png') repeat-y left top; /*divisor*/
}
ul .primeiro a {
background: none;
}
ul a:hover {
color: #085662;
background: #44cade;
}
#home #navegacao .home a, #sobre #navegacao .sobre a {
color: #085662;
background: #44cade;
}
#navegacao {
/*display: table;*/
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
O menu acima fica bom na maioria dos casos contudo diminua a largura da tela do browser para um tamanho que
simplesmente o menu não cabe. Você observa que o menu não se achata e não quebra para a próxima linha. Foi
esse o estilo que escolhi mas se quiser ver como fazer um menu que caberia em qualquer tela veja:
01-Menu 1-Vertical
2-Menu Horizontal com Abas.html
3-Menu Horizontal Sólido.html
04-Menu Hamburger1-Bootstrap
Neste exemplo exibo uma div h3 com os efeitos de responsividade corretos, tanto o tamanho da fonte como o tamanho da div foram dimensionados de uma boa maneira, mas nunca é perfeita.
Por si só a tag div e h3 são responsivas, mas o tamanho da fonte do h3 é constante, nunca muda. Se o texto não cabe na linha o excedente é enviado para a linha logo abaixo.
Alterando a largura da tela notei que até a largura 1257 pixels o texto da tag h3 é exibido perfeitamente. Menos que isso
o texto é deslocado para a linha de baixo. Portanto vou reduzir o tamanho da fonte para 25px quando o tamanho da tela
for menor que 1260 pixels. Vimos anteriormente que para realizar este efeito a o estilo correto é:
'@media (max-width: numpx)' é aplicado quando a lagura da tela é menor que numpx.
Fiz o teste de largura da tela e ao atingir 932 pixels a fonte de 20px ficou grande, portanto vou aplicar a font-size de 15px quando o tamanho da tela for de 940 pixels.
Fazendo novamente o teste descobri que quando a largura do browser atinge 736 pixels o tamanho da fonte de letra 15px fica muito grande. Vou aplicar o tamanho da fonte de letra 10px quando a tela atingir a largura de 740 px.
Note que abaixo de 10 pixels a fonte de letra fica muito pequena. A meu ver não devo diminuir mais a fonte porque não haveria diferença entre a tag h3 e o texto comum da página. Mas isso depende do gosto e da necessidade do programador e do cliente.
Importante: Você notou que fiz o dimensionamento acima para uma tag h3 com um tamanho de texto específico. Se você mudar o número de caracteres do texto terá que mudar todas as medias-queries para esse novo tamanho de texto. O mais chato é quando usamos o mesmo break-point para dimensionar diversos elementos na página onde, por exemplo, a tag h3 ficou boa mas uma imagem ficou grande ou fora de posição. Neste caso você tem 2 opções...fazer o melhor ajuste possível para a tag h3 e a imagem ou separar os elementos em media-queries diferentes, que é o correto a fazer.
Quanto aos menus que mencionei acima temos o 'hamburger-menu' que é um efeito que 'colapsamos' o menu num ícone de hamburger e ao clicar nesse 'hamburger' o menu é exibido na vertical e não na horizontal como ele foi realmente feito e como seria exibido em uma tela grande. É um recurso muito bom para menus em celulares.
Código
<style>
@media (max-width: 1260px) {
h3 {
font-size: 20px;
}
}
@media (max-width: 940px) {
h3 {
font-size: 15px;
}
}
@media (max-width: 740px) {
h3 {
font-size: 10px;
}
}
</style>
Como você deve ter percebido não há outra maneira de testar a responsividade de uma página senão alterando a largura da tela do browser enquanto estiver desenvolvendo ela.
Quando você terminar e quise ver como ela ficaria realmente numa tela de um celular você pode usar o depurador do browser. Para ativar ele vá até o browser e pressione a tecla F12. Em seguida localize na tela exibida o recurso 'Ativar/Desativar emulação de dispositivo' (segundo item) e clique nele. No topo da tela temos a caixa 'Dimensões:Respondendo'. Clique no triangulo à direita do texto e escolha um dispositivo que deseja emular.
Tenho certeza que você chegará a mesma conclusão que eu...por melhor que a página responsiva seja elaborada dependendo do dispositivo e de outras condições sempre haverá uma situação que algo ficará horrível, se não toda a página pelo menos um ou outro item brigando por espaço. Se houvesse um jeito correto e perfeito ele seria 'embutido' no browser por default.