Criação de arquivo breakpoints para adaptação da aplicação em diferentes telas

[JonasGz]

Closes #39

Feature

Criação de arquivo breakpoints para adaptação da aplicação em diferentes telas.

Visual evidences 🖼️

Checklist

• Issue linked
• Build working correctly
• Tests created

Additional info

Pesquisa

• Mobiles pequenos: 320px até 359px (a grande maioria esmagadora dos celulares possuem no mínimo 360px, porém, em alguns casos de celulares antigos, como o iphone 6/6s, possuem menos que 360px, para tanto, precisei adicionar essa categoria, e na conversa com o designer, por ser bem pequeno a configuração precisaria ser diferente dos mobiles convencionais do breakpoint abaixo).
• Mobile retrato: 360px até 666px (na pesquisa realizada todos os celulares em modo retrato possuem entre 320 e 430px), por margem de segurança defini para 666px, que é o limite até o próximo breakpoint).
• Tablets/mobile paisagem: 667px até 1023px (a maioria dos mobiles em modo paisagem possuem mais de 800px de width, portanto achei prudente colocá-los no grupo dos tablets, como forma de simplificar a quantidade de breakpoints).
• Tablets paisagem/desktops médios: 1024px até 1279px (a grande maioria dos tablets em modo paisagem possuem width igual ou maior que 1024px, portanto estão grupo dos desktops médios).
• Grandes telas: 1280px até ∞ (alguns tablets em modo paisagem, como o iPad Pro e o Nexus 10 e desktops em geral com telas maiores que 1280px, poderia ter um breakpoint para telas extra grande, de 1920px pra cima, mas conversando com o designer (Eliabe), preferimos manter a mesma configuração, novamente como forma de simplificar a quantidade).

1. Os breakpoints foram definidos considerando o layout definido pelo designer e na variedade de dispositivos e telas que possam alterar significativamente o layout.
2. Os dados foram baseados nas telas mais utilizadas, conforme o gráfico presente no site statcounter.com, do período de 01 JAN 23 a 31 DEZ 23 e de todos os dispositivos existentes encontrados. O arquivo também foi elaborado com base na pesquisa realizada em sites de referência em desenvolvimento, atualizados, conforme listagem nas referências abaixo.
3. Foi utilizado a medida rem, por ser o padrão do projeto, e com base no artigo do @Alecell PX, EM ou REM Media Queries?.

4. Tutorial de inclusão:
a. Importar o arquivo breakpoins.scss
b. Adicionar @include breakpoints.XXXX, onde XXXX é o breakpoint escolhido e inserir o item css que deseja modificar, conforme o exemplo abaixo:

.home {
   background-color: black;
}

@include breakpoints.from320 {
 .home {
    background-color: red; // modificação
  }
}

b. Lista de breakpoints definidos:

from320 = celulares pequenos - (320px - 359px)
from360 = celulares modo retrato - (360px - 666px)
from667 = celulares modo paisagem/tablets - (667px - 1023px)
from1024 = tablets modo paisagem e desktops médios - (1024px - 1280px)
from1280 = desktops e telas grandes ++ (1280px - infinito)

5. Referências:

• https://www.linkedin.com/pulse/px-em-ou-rem-media-queries-alexandre-gomes/?originalSubdomain=pt
• https://uxpickle.com/most-common-screen-resolution-in-2023/
• https://www.linkedin.com/pulse/px-em-ou-rem-media-queries-alexandre-gomes/?originalSubdomain=pt
• https://gs.statcounter.com/
• https://yesviz.com/
• Extension Responsive Viewer

[Alecell]

BALA!

[Alecell]

Só precisa atualizar a branch

[Alecell]

TA BALA!!