Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 22 commits into from

Conversation

JonasGz
Copy link
Contributor

@JonasGz JonasGz commented Jan 13, 2024

Closes #39

Feature

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

Visual evidences 🖼️

most commons desktops
most commons mobiles
most commons tablets

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)

  1. Referências:

@JonasGz JonasGz marked this pull request as ready for review January 13, 2024 20:59
@JonasGz JonasGz marked this pull request as draft January 13, 2024 21:02
@JonasGz JonasGz marked this pull request as ready for review January 20, 2024 01:03
src/styles/breakpoints.scss Outdated Show resolved Hide resolved
src/styles/breakpoints.scss Outdated Show resolved Hide resolved
src/styles/breakpoints.scss Outdated Show resolved Hide resolved
src/styles/breakpoints.scss Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BALA!

@Alecell
Copy link
Contributor

Alecell commented Jan 31, 2024

Só precisa atualizar a branch

@JonasGz JonasGz changed the title Issue 39 Criação de arquivo breakpoints para adaptação da aplicação em diferentes telas Feb 1, 2024
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TA BALA!!

@JonasGz JonasGz closed this by deleting the head repository Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Arquivo de breakingpoints
3 participants