Design Responsivo para Web

• Definição: O princípio central do design responsivo é a adaptabilidade – a capacidade de um site ajustar seu layout e conteúdo com base no tamanho da tela e nas capacidades do dispositivo em que está sendo visualizado.
• Grades fluidas: Elas usam unidades relativas como porcentagens em vez de unidades fixas como pixels, permitindo que o conteúdo redimensione e se reorganize com base no tamanho da tela.
• Imagens flexíveis: Elas são configuradas para redimensionar dentro de seus elementos contêineres, garantindo que não ultrapassem seus contêineres em telas menores.

Consultas de Mídia

• Definição: Isso permite que os desenvolvedores apliquem estilos diferentes com base nas características do dispositivo, principalmente na largura do viewport.

<link rel="stylesheet" href="styles.css">
<p class="mq-example">The background of this paragraph will change when the viewport is at least 768px wide.</p>

.mq-example {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: lightyellow;
}

@media screen and (min-width: 768px) {
  /* Styles for screens at least 768px wide */
  .mq-example {
    background-color: lightblue;
  }
}

• Tipo de Mídia all: Isso é adequado para todos os dispositivos. Este é o padrão se nenhum tipo de mídia for especificado.
• print Media Types: Isso é destinado a material paginado e documentos visualizados em uma tela no modo de visualização de impressão.
• Tipos de Mídia screen: Isto é destinado principalmente para telas.
• aspect-ratio: Isso descreve a proporção entre a largura e a altura da viewport.

@media screen and (aspect-ratio: 16/9) {
  /* Styles for screens with a 16:9 aspect ratio */
}

• orientation: Isso é usado para indicar se o dispositivo está em orientação landscape ou portrait.

<link rel="stylesheet" href="styles.css">
<p class="orientation-example">This paragraph's background will change in landscape orientation.</p>

.orientation-example {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: lightyellow;
}

@media screen and (orientation: landscape) {
  /* Styles for landscape orientation */
  .orientation-example {
    background-color: lightgreen;
  }
}

• resolution: Isso é usado para descrever a resolução do dispositivo de saída em pontos por polegada (dpi) ou pontos por centímetro (dpcm).

@media screen and (min-resolution: 300dpi) {
  /* Styles for high-resolution screens */
}

• hover: Isso é usado para testar se o mecanismo de entrada primário pode pairar sobre elementos.

<link rel="stylesheet" href="styles.css">
<button>Hover over me</button>

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: lightgray;
  border: 1px solid #999;
  cursor: pointer;
}

@media (hover: hover) {
  /* Styles for devices that support hover */
  button:hover {
    background-color: yellow;
  }
}

• prefers-color-scheme: Isso é usado para detectar se o usuário solicitou um tema de cor claro ou escuro.
• Media Queries e Operadores Lógicos: O operador and é usado para combinar múltiplas características de mídia, enquanto not e only podem ser usados para negar ou isolar media queries.

<link rel="stylesheet" href="styles.css">
<p class="logical-example">This paragraph's background will change when the screen is at least 768px wide AND in landscape orientation.</p>

.logical-example {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: lightyellow;
}

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Styles for landscape screens at least 768px wide */
  .logical-example {
    background-color: lightcoral;
  }
}

Pontos de Interrupção Comuns de Mídia

• Definição: Pontos de interrupção de mídia são pontos específicos no design de um site onde o layout e o conteúdo se ajustam para acomodar diferentes tamanhos de tela. Existem alguns pontos de interrupção gerais que você pode usar para direcionar telefones, tablets e telas de desktop. Mas não é aconselhável tentar cobrir todos os tamanhos de tela possíveis para diferentes dispositivos.

<link rel="stylesheet" href="styles.css">
<p class="breakpoint-example">This text will change size when the viewport width is at least 768px.</p>

.breakpoint-example {
  font-size: 1rem;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Styles for screens wider than 768px */
@media screen and (min-width: 768px) {
  .breakpoint-example {
    font-size: 1.125rem;
    background-color: lightblue;
  }
}

• Dispositivos Pequenos (smartphones): até 640px
• Dispositivos Médios (tablets): 641px a 1024px
• Dispositivos Grandes (desktops): 1025px e maiores

Abordagem mobile first

• Definição: A abordagem mobile-first é uma filosofia de design e uma estratégia de desenvolvimento em design responsivo que prioriza a criação de sites para dispositivos móveis antes de projetar para telas maiores.

<link rel="stylesheet" href="styles.css">
<div class="container">
  <p>The width of this container changes based on the viewport size.</p>
</div>

/* Base styles for mobile */
.container {
  width: 100%;
  padding: 10px;
  background-color: lightblue;
}

/* Styles for larger screens */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    width: 960px;
  }
}