Responsividade e CSS Grid.

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 8 months ago

  Olá Matheus, primeiramente, parabéns por ter conseguido realizar o projeto, ficou bem feito.

  Quanto a sua duvida sobre responsividade e altura do site, aqui vai algumas dicas.

  Primeiramente sobre responsividade, para trabalhar com responsividade utilizamos as media queries, e com elas definimos o limite de tela que queremos que os estilos sejam aplicados, e criamos um bloco de estilos, que quando a condição do media query é true, ele fará com que aquela estilização substituirão as mesmas propriedades e/ou complementarão. dessa forma:

  @media (condição) {
    Bloco de estilos
  }
  

  Geralmente o que eu recomendo para todo mundo com dificuldade em trabalhar com medias queries, é começar a fazer projetos seguindo a ideia do Mobile-first Workflow, pois é mais intuitivo, já que você começa pelas telas menores, geralmente 320px ou 375px, e só quando a tela estiver em uma certa largura que você passa a usar a media query, e ainda por cima basta usar apenas uma condição que é o min-width.

  Quanto a altura do site, geralmente você pode definir isso de duas formas, a primeira seria atribuindo o tamanho desejado à tag body, por exemplo:

  body {
    height: 100vh /* Isso equivale a tela ser 100% do tamanho da tela do usuário */
  }
  ou
  body {
    height: 1200px /*Neste caso, o tamanho do body será fixado em 1200px, independente do tamanho da tela do usuário*/
  }
  

  Ou por último você pode apenas deixar que o body se auto ajuste ou seja, tenha o valor de height: auto (que é o comportamento padrão).

  Caso tenha ficado alguma duvida, por favor diga aqui no comentário que tentarei esclarecer da melhor forma possível.

  E novamente, parabéns pelo seu projeto!

  Marked as helpful

  0