Caixa 1

Caixa 2

Caixa 3

Caixa 4

É preciso aumentar ou diminuir a tela para ver o efeito média que é aplicado a partir dos seguintes comandos css:

body {
display: flex;
}

.caixas {
width: 100px;
height: 100px;
border: 3px solid #000;
}

@media (orientation: landscape) {
body {
flex-direction: row;
}
}

@media (orientation: portrait) {
body {
flex-direction: column;
}
}

Deixe a tela do tamanho de um quadrado perfeito para ver o efeito do código á seguir:

@media (aspect-ratio: 1/1) {
body {
background-color: red;
}
}

@media (min-aspect-ratio: 2/1) {
body {
background-color: blue;
}
}

@media (max-aspect-ratio: 1/2) {
body {
background-color: green;
}
}

Função VAR

A função var é uma solução para controlar todas as cores do site em um único código. Por exemplo; O comando :root {....} é uma variável que me permite criar padrões de comandos que serão aplicados posteriormente em todo o site.

--bg-color: black
--bg-second: brown
--font-color: white

Essas 3 cores podem ser as principais cores de todo meu site. E isso ficará em um único comando css chamado :root {...} E assim, poderei mudar todas as cores do site com apenas esses 3 códigos de cores.

Detalhe: (--bg-color) e similares, não são coamndos, são padrões que eu mesmo posso criar para repetir esse padrão sempre que desejar usar a cor de fundo. Exemplo no css ficaria assim:

body