Duvida sobre Scss | Front-end | Alura - Cursos online de tecnologia

Oi,

Primeiro, é fundamental entender o que o @media faz. Ele permite que você aplique estilos CSS específicos com base nas características do dispositivo em que a página está sendo visualizada, como largura da tela. Aqui está como você pode utilizá-lo:

// Exemplo de uso do @media para largura de tela
@media screen and (max-width: 768px) {
  // Estilos a serem aplicados quando a largura da tela for no máximo 768px
}

@media screen and (min-width: 769px) {
  // Estilos a serem aplicados quando a largura da tela for pelo menos 769px
}

O exemplo acima mostra como você pode definir estilos para diferentes larguras de tela. A primeira regra se aplica a telas com largura máxima de 768 pixels, enquanto a segunda regra se aplica a telas com largura mínima de 769 pixels.

Agora, para tornar seu projeto mais responsivo, você pode seguir estas etapas:

1. Definir breakpoints: Comece identificando os pontos de quebra (breakpoints) em que deseja que seu design mude para acomodar diferentes larguras de tela. Os pontos de quebra geralmente correspondem a tamanhos de tela comuns, como telefones, tablets e desktops. Vamos usar dois exemplos: telas pequenas (até 768px) e telas médias a grandes (769px e acima).

2. Organizar seu SCSS: Uma prática recomendada é dividir seu SCSS em arquivos separados para facilitar a manutenção. Você pode ter um arquivo principal que importa os outros conforme necessário. Por exemplo:

// main.scss
@import 'variables';
@import 'styles';
@import 'media-queries';

3. Definir variáveis: Use variáveis para armazenar informações comuns, como larguras dos breakpoints, cores, tamanhos de fonte, etc. Isso tornará mais fácil ajustar seu design posteriormente. Aqui está um exemplo de um arquivo variables.scss:

// variables.scss
$small-screen: 768px;
$font-size: 16px;
$primary-color: #3498db;

4. Estilos base: Crie estilos base que se aplicam a todas as telas. Aqui está um exemplo em styles.scss:

// styles.scss
body {
  font-size: $font-size;
  color: #333;
}

.button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

5. Estilos específicos para cada breakpoint: Agora, crie arquivos separados para lidar com as regras de estilo específicas para cada breakpoint. Vamos criar um arquivo media-queries.scss para isso:

// media-queries.scss
@media screen and (max-width: $small-screen) {
  .button {
    padding: 8px 16px;
  }
}

@media screen and (min-width: $small-screen + 1) {
  .button {
    padding: 10px 20px;
  }
}

No exemplo acima, estamos ajustando o padding do botão com base na largura da tela. Quando a tela é menor ou igual a 768px (nosso breakpoint de tela pequena), o padding é menor, enquanto nas telas maiores (acima de 768px), o padding é maior.

6. Importar os estilos de mídia: Certifique-se de importar o arquivo media-queries.scss no seu arquivo principal (como mostrado na etapa 2).

7. Teste e ajuste: Visualize seu projeto em diferentes dispositivos e ajuste os valores dos breakpoints e estilos conforme necessário para garantir que seu projeto fique responsivo e agradável em todas as telas.