My first solution using media query

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 5 months ago

  Olá Joyce, parabéns pela conclusão do seu primeiro desafio aqui no Frontend Mentor.

  Sobre sua duvida de quando usar %, vh e vw, é bem simples. Geralmente você vai utilizar a porcentagem quando você quer que um valor ocupe uma certa porcentagem de um elemento pai, vamos supor que tenhamos o nosso HTML assim:

  <div class="blue">
      <div class="orange">Teste</div>
  </div>
  

  Suponhamos que o .blue tenha 100px de largura, e você quer que o .orange tenha sua largura relativa a de .blue, dessa forma você poderia utilizar a porcentagem, pois assim você estaria falando algo como "O .orange deve ter X por cento do tamanho de .blue".

  Sobre as unidades de viewport, elas são relativas ao tamanho da página na tela. Suponhamos que você está utilizando um celular de 400px de largura, 100vw seria equivalente a 400px, enquanto 90vw seria equivalente a 90% dessa largura total, ou seja 360px. Tanto que geralmente utilizamos essas medidas de viewport para definir o tamanho máximo da página.

  E adicionando um pouco mais a esse comentário abaixo ou acima do meu, que menciona a utilização de rem. É muito mais recomendável utilizar rem ou px para a criação de elementos com tamanhos definidos, por exemplo, esse card do desafio, ele não precisa ter um valor que esteja em constante mudança, então você poderia colocar um width: 310px; por exemplo, que dessa forma ele teria um valor absoluto que não iria alterar baseado no tamanho da tela. Já o rem deve ser utilizado com cautela, isso porque ele é relativo ao tamanho de fonte utilizada pelo navegador do usuário, então se o usuário estiver com uma fonte grande, isso pode deixar o layout da sua página um pouco quebrado, então é recomendável utilizar o rem sempre em todos elementos que você for definir largura e tamanho.

  Edit: Havia esquecido de um ponto bem importante que é relacionado ao alinhamento. Percebi que você utilizou margin para fazer o alinhamento, isso não era necessário, você pode remover esse margin do seu .container e adicionar no seu .qrcode-desktop esse trecho a seguir:

  align-items: center;
  height: 100vh;
  

  Que assim ele fará o alinhamento na vertical.

  E novamente, parabéns, caso tenha ficado qualquer duvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Joyce Silva•10

  @joycejsmPosted 5 months ago

  Obrigada pelo feedback! Suas observações me ajudaram a entender de forma bem simples sobre como funcionam as medidas. @R3ygoski

  1
• 

  javalzu•420

  @jaalzuPosted 5 months ago

  nice work! i highly recommend you to stop using percents % and start using rems!! percents can make it really hard when u start doing responsive the page. and also i see u don't use the style-guide that give you frontendmentor!!!

  0