How to Build Responsive Designs and Scroll Effects with CSS Container Queries

**Construir Desenhos Responsivos e Efeitos de Rolar com Consultas de Contêiner CSS**

Olá, comunidade de webmastersmz.com! Hoje vamos falar sobre como criar desenhos responsivos e efeitos de rolar com Consultas de Contêiner CSS. Este tópico é muito relevante para os desenvolvedores web que desejam criar sites e aplicações web que se adaptem a diferentes tamanhos de tela e dispositivos.

**O que são Consultas de Contêiner CSS?**

Consultas de Contêiner CSS são uma funcionalidade do CSS que permite que os desenvolvedores apliquem estilos a elementos baseados nas propriedades do contêiner que os envolve. Isso significa que podemos criar estilos que sejam aplicados a um elemento com base nas dimensões do seu contêiner, como largura e altura.

**Como criar desenhos responsivos com Consultas de Contêiner CSS?**

Para criar desenhos responsivos com Consultas de Contêiner CSS, precisamos seguir alguns passos:

1. **Definir o contêiner**: Primeiro, precisamos definir o contêiner que vamos usar para aplicar os estilos. Isso pode ser um elemento `div`, `section`, `article`, etc.
2. **Adicionar a consulta de contêiner**: Em seguida, precisamos adicionar a consulta de contêiner ao nosso CSS, usando a sintaxe `@container`. Por exemplo: `@container (min-width: 600px) { ... }`.
3. **Aplicar estilos**: Dentro da consulta de contêiner, podemos aplicar estilos ao elemento que queremos que seja responsivo.

**Como criar efeitos de rolar com Consultas de Contêiner CSS?**

Para criar efeitos de rolar com Consultas de Contêiner CSS, precisamos usar a propriedade `scroll` em combinação com as consultas de contêiner. Por exemplo:

```css
@container (min-width: 600px) {
  .meu-elemento {
    scroll-behavior: smooth;
  }
}
```

Isso fará com que o elemento `.meu-elemento` tenha um efeito de rolar suave quando o usuário rolar a página.

**Conclusão**

Em resumo, as Consultas de Contêiner CSS são uma ferramenta poderosa para criar desenhos responsivos e efeitos de rolar em sites e aplicações web. Com essas técnicas, podemos criar experiências de usuário mais agradáveis e personalizadas.

E agora, para garantir que os vossos projetos e fóruns rodam sem falhas, convido-vos a conhecer as soluções de alojamento de alta performance da AplicHost em https://aplichost.com. Com a AplicHost, você pode ter certeza de que o seu site ou aplicação web está hospedado em servidores rápidos e seguros, com suporte técnico especializado e recursos ilimitados. Não perca mais tempo e descubra como a AplicHost pode ajudar a impulsionar o seu negócio online!

                     How to Build Responsive Designs and Scroll Effects with CSS Container Queries
               



Tópico:
                     How to Build Responsive Designs and Scroll Effects with CSS Container Queries
               
Categoria: Tutoriais | FreeCodeCamp Premium
Idioma Principal: Português (Conteúdo de Tecnologia)

Conteúdo do Tutorial / Guia Passo a Passo:
-------------------------------------------------------------------------
Container queries let you target specific sections of your webpage and apply styles to create customizable, responsive designs based on the container's size rather than that of the viewport.

This guide will teach you this useful alternative for responsive designs. You'll also learn about on-scroll effects in CSS.

Prerequisites

Before diving into scrollable queries and container-based scroll effects, make sure you have:

• Basic familiarity with CSS features and key terms — understanding properties like

Código Selecionar Expandir

height,

Código Selecionar Expandir

overflow, and how they affect layout.

• Experience writing vanilla CSS — being comfortable with selectors, rulesets, and applying styles without relying on frameworks.

• A working knowledge of HTML structure — since scroll behavior depends on parent elements, knowing how containers and child elements interact is essential.

• (Optional but helpful) Some exposure to responsive design concepts, so you can see how scrollable parents fit into broader layout strategies.

What We'll Cover:

• Prerequisites

• How to Use Container Queries

• Difference Between Container Queries and Media queries

• Container Scroll-state

• Wrapping Up

How to Use Container Queries

Usually, when making responsive designs, you use a media query that adds style to the page based on the page's width viewport, but container queries shift the narrative by adding styles based on the specific elements container or parent element size.

Take a navbar as an example. Let's say you want to have its links wrapped on top of each other when the size of a

Código Selecionar Expandir

navelement size is less than

Código Selecionar Expandir

450pxand also change the background color when the screen size is less than

Código Selecionar Expandir

450px.

To make

Código Selecionar Expandir

navelement links wrap on top of each other when the

Código Selecionar Expandir

navelement size is less than

Código Selecionar Expandir

450px, we start by wrapping the links inside a single parent

Código Selecionar Expandir

nav:

Código Selecionar Expandir

  <nav>
<img src="" alt="logo" />
<ul>
<a href="">home</a>
<a href="">about</a>
<a href="">services</a>
<a href="">contact</a>
</ul>
</nav>

Then use

Código Selecionar Expandir

container-typeto define a container query on the wrapping element or parent (

Código Selecionar Expandir

nav) element. It can have one of the following values:

•

Código Selecionar Expandir

inline-size: Used when you want to track the x-axis of the parent element on the page (width)

•

Código Selecionar Expandir

block-size: Used when you want to track the y-axis of the parent element on the page (height)

• Container Scroll-state: Used when you want to track the parent element when scrolled and when elements with position

Código Selecionar Expandir

stickyare stuck on the screen.

For most cases, you will need to track the size of an element against the x-axis size, and you must use the

Código Selecionar Expandir

container-typeon a parent element because you want to apply styles based on the parent element size. Here, we'll use the

Código Selecionar Expandir

navbecause it is the parent element.

Código Selecionar Expandir

nav {
container-type: inline-size;
}

You then define a container query with an at symbol (

Código Selecionar Expandir

@) followed by the

Código Selecionar Expandir

containerkeyword.

Then check if the

Código Selecionar Expandir

widthof the parent container (

Código Selecionar Expandir

nav) gets narrower than

Código Selecionar Expandir

450px. If the condition is true, add a

Código Selecionar Expandir

flex-wrapto links element:

[code]@container (wi

... [O tutorial continua no link abaixo] ...