Using HTML and CSS

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hola 👋🏻, algo de esto te pode interessar:

  HTML / ACESSIBILIDADE:

  • Em vez de usar background-image, poderia ser melhor usar o elemento <picture>, que é ideal para mostrar diferentes imagens de acordo com o dispositivo ou o tamanho da tela:

  <picture>
  <source media="(min-width: 600px)" srcset="img/perfume.png">
  <img src="img/perfume-2.png" alt="descrição">
  </picture>
  

  • O ícone é uma imagem decorativa e, portanto, precisa de um atributo alt vazio para ser ignorado por um screen reader.

  CSS:

  • Como parte do reinicio de CSS que você fez, é importante incluir a propriedade box-sizing para permitir que incluamos padding e border no ancho e no alto geral dos elementos:

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  

  • Piense en usar unidades relativas como rem o em, ya que son mejores para diseños escalonáveis. Algo simples para começar seria converter para rem (1 rem equivale a 16px por defeito). Considere esta sugestão especialmente para o font-size.

  Espero que seja útil :)

  Boa solução.

  Saudações,

  Marked as helpful

  0