As Media Queries são uma parte essencial do desenvolvimento web responsivo, permitindo que os desenvolvedores adaptem o layout e o estilo de uma página da web de acordo com as características do dispositivo e as preferências do usuário. É fundamental garantir uma experiência de usuário otimizada, considerando fatores como tamanho da tela, orientação, tema preferido e até mesmo a economia de dados. Neste contexto, vamos explorar como utilizar Media Queries para respeitar as preferências do usuário

1. Tema Preferido (Light/Dark Mode)

A preferência do usuário por um tema claro ou escuro pode ser respeitada através de Media Queries. Com o aumento da conscientização sobre a importância da redução da fadiga ocular, é vital oferecer uma opção de tema que se adapte às preferências do usuário. As Media Queries permitem detectar a preferência de esquema de cores (prefers-color-scheme) e ajustar o estilo da página de acordo.

/* Estilo para tema claro */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Estilo para tema escuro */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

2. Adaptando-se ao Tamanho da Tela

Outra maneira de respeitar as preferências do usuário é garantir que o layout da página seja adaptado de acordo com o tamanho da tela do dispositivo. Isso pode ser alcançado usando Media Queries para definir regras de estilo específicas para diferentes tamanhos de tela.

/* Estilo para telas pequenas (mobile) */
@media (max-width: 767px) {
    /* Estilo específico para telas pequenas */
}

/* Estilo para telas médias (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Estilo específico para tablets */
}

/* Estilo para telas grandes (desktop) */
@media (min-width: 1024px) {
    /* Estilo específico para desktop */
}

3. Considerando a Orientação do Dispositivo

A orientação do dispositivo (retrato ou paisagem) pode ser uma preferência importante para muitos usuários. Utilize Media Queries para garantir que seu layout seja adequado para ambas as orientações.

/* Estilo para orientação retrato */
@media (orientation: portrait) {
    /* Estilo específico para orientação retrato */
}

/* Estilo para orientação paisagem */
@media (orientation: landscape) {
    /* Estilo específico para orientação paisagem */
}

4. Considerando reduzir as animações

O prefers-reduced-motion: reduce é uma opção valiosa para garantir uma experiência de usuário mais amigável para aqueles que preferem ou necessitam de menos movimento em interfaces web. Ao utilizar essa media query, os desenvolvedores podem modificar dinamicamente o comportamento de animações e transições, reduzindo-as ou até mesmo removendo-as completamente.

Isso contribui para tornar o ambiente digital mais acessível e confortável para pessoas que podem ser sensíveis a movimentos intensos ou que buscam uma experiência mais tranquila durante a navegação na web.

O exemplo ilustra como ajustar as transições e até ocultar elementos animados em conformidade com essa preferência, demonstrando um compromisso com a acessibilidade e a inclusão na concepção do design.

 :root{
        --transitionTime: 0.2s;
    }
    @media (prefers-reduced-motion: reduce) {
        #tsparticles { display:none; }
        :root{
            --transitionTime: 0s;
        }
    }

Conclusão

Respeitar as preferências do usuário é um aspecto crucial do desenvolvimento web moderno. As Media Queries são uma ferramenta poderosa para alcançar essa meta, permitindo a adaptação do layout e estilo de acordo com as necessidades e escolhas do usuário. Ao integrar Media Queries de forma eficaz, podemos criar uma experiência de usuário mais personalizada e agradável, levando em consideração fatores como tema preferido, tamanho da tela e orientação do dispositivo.

Lembre-se, a chave está em oferecer flexibilidade e opções para o usuário, garantindo que sua aplicação web seja verdadeiramente inclusiva e se adapte às diversas preferências e contextos dos usuários. 🌟

Leia mais sobre

• https://github.com/felipegenuino/UserPrefers
• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
• https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media/prefers-color-scheme
• Reduce 1 - https://css-tricks.com/creating-websites-with-prefers-reduced-data/ https://polypane.app/blog/creating-websites-with-prefers-reduced-data/
• Reduce 2 - https://drafts.csswg.org/mediaqueries-5/