Olá Thiago, tudo bem?
Entendi sua dúvida sobre o tamanho da tela e a necessidade de criar uma quarta media-query para uma tela ainda maior. É possível que você precise mesmo criar uma nova media-query para atender a essa tela maior.
Sobre a questão de não ter um Figma para esse tamanho de tela, uma dica é tentar utilizar as proporções e escalas já definidas nas outras media-queries para criar os estilos para essa nova tela. Outra opção é tentar encontrar referências de outros designs responsivos que possam te ajudar a definir esses valores.
Lembre-se de sempre testar suas alterações em diferentes tamanhos de tela para garantir que o layout esteja se adaptando corretamente.
Uma dica que pode ajudar seria aumentar o tamanho das fontes, por exemplo:
- Em telas de
360px
(Mobile) você pode ter colocado para títulos 20px
, e textos 15px
(só um exemplo), e uma média de margin
ou padding
de 1rem, 1.5rem e/ou 0.5rem
. - Em telas maiores que
500px (min-width:500px)
até telas de tamanho máximo 760px (max-width: 760px)
(Tablet) você pode ter colocado para títulos 27px
, e textos 20px
, e uma média de margin
ou padding
de 2rem, 2.5rem ou 1.5rem
. - E em telas maiores que
760px (min-width: 760px)
até telas de tamanho 1024px (max-width: 1024px)
você pode ter colocado para títulos 32 ou 34px
e textos 24, 25 ou 26px
, e uma média de margin
e padding
de talvéz 3rem, 2.5rem
ou mais. - Assim se pensar logicamente para telas maiores de
1024px (min-width: 1024px)
podemos somente aumentar o tamanho da fonte e adaptar os espaços seguindo uma espécie de padrão onde a fonte e espaçamentos mais ou menos duplica à cada mudança de @media queries
conforme o tamanho da tela cresce.
Ah e tente aumentar também o valor do width
das imagens, divs
, sections
, entre outras.
O resto deixo a seu critério de avaliação e como uma espécie de desafio, caso precise eu lhe auxilio com isso, caso você sentir que consegue sozinho vá lá permita-se tentar e errar e crescer com o erro. Deixe a criatividade voar.
Caso precise estarei aqui para ajudar com a adaptação. Boa sorte com seu projeto!
Espero ter ajudado, abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓