Entendendo as unidades CSS (e como usá -las)

Você provavelmente já viu várias unidades CSS no código da Web antes, mas entender como elas funcionam permite que você as use de maneira mais intencional. Nesta postagem, você aprenderá o que realmente são as unidades CSS, como elas afetam seus layouts e como usá -las dentro do Divi 5 o ajuda a projetar mais responsabilidade.

O Divi 5 traz suporte nativo para unidades CSS diretamente para o construtor. Graças ao novo recurso de unidades avançadas, você pode usar %, em, REM, VW e muito mais sem código personalizado.

O que são unidades CSS?

As unidades CSS dizem ao navegador o quão grande ou pequeno deve ser. Esteja você definindo o tamanho de um título, a largura de uma seção ou o espaçamento entre os elementos, você está usando unidades para definir esse espaço. Sem eles, o navegador não tem idéia do que fazer com seus valores.

Por exemplo, a largura de escrita: 100 não significa nada para o navegador. Mas adicione uma unidade, como 100px ou 100%, e agora ele sabe exatamente o que você deseja.

Veja este exemplo com quatro caixas, cada uma usando um valor diferente CSS:

• O primeiro usa a largura: 100. Tecnicamente inválidos, mas muitos navegadores o renderizam como 100%.
• O segundo (100px) usa uma largura fixa.
• A terceira e quarta escala (100% e 60%) em relação ao contêiner pai.

Você pode se perguntar por que a primeira caixa com largura: 100 ainda parece largura total, mesmo que seja tecnicamente inválida.

Largura: 100 é ignorada pelo navegador porque não possui uma unidade. Mas, nesse caso, a caixa ainda se estende pelo contêiner, não porque o CSS foi aceito, mas porque os elementos em nível de bloco, como o DIV, abrangem naturalmente toda a largura de seus pais por padrão. É uma coincidência de comportamento inadimplente, não como resultado do CSS inválido sendo interpretado como 100%.

Unidades CSS populares

Embora PX e % geralmente apareçam, muitos outros são igualmente úteis quando você sabe quando usá -los:

Você verá essas unidades em todos os lugares do Web Design, desde definir tamanhos de fonte, definir larguras de seção, ajustar o preenchimento e margens e construir layouts de grade flexíveis. Eles são um dos fatores decisivos mais importantes na aparência e se comporta ao layout. E onde você usa quais unidades importa mais em design eficaz, chegaremos a isso em breve.

Mas primeiro, é útil saber que todas as unidades CSS se enquadram em dois tipos principais: absoluto e relativo.

Unidades absolutas e relativas

Compreender a diferença é essencial se você deseja que seu layout funcione bem em diferentes tamanhos de tela.

Unidades absolutas

Unidades absolutas têm valores fixos. Isso significa que, quando você define algo para 100px, ele sempre terá 100 pixels de largura, seja o usuário em um telefone, um tablet ou um monitor de mesa enorme. Essas unidades não respondem ao tamanho da tela ou ao layout circundante, o que as torna ótimas quando você precisa de controle exato.

Eles são frequentemente usados para bordas, tamanhos de ícones ou sombras de caixa fixa, geralmente onde a precisão é mais importante do que a flexibilidade.

Mas essa mesma precisão pode causar problemas. Um design que parece perfeito em uma tela grande pode transbordar, encolher desajeitadamente ou quebrar inteiramente em dispositivos menores. Como as unidades absolutas não se adaptam, elas podem fazer com que seu layout pareça rígido, a menos que seja usado com cuidado.

Unidades relativas

Como o nome sugere, eles se ajustam com base no ambiente. Em vez de ficar bloqueado em um tamanho específico, eles escalam dependendo do contexto (elemento pai, viewport etc.). Isso os torna muito mais flexíveis para o design responsivo.

Algumas unidades respondem ao tamanho do elemento pai, outras ao tamanho da fonte raiz da página, e outras até reagem à própria janela do navegador. Aqui estão alguns principais:

• % Escalas com o contêiner pai.
• EM ajusta com base no tamanho da fonte do elemento pai.
• O REM segue o tamanho da fonte raiz da página.
• VW e VH respondem à largura e altura da visualização do navegador.

Como eles se adaptam a ambientes diferentes, essas unidades ajudam a criar layouts que parecem naturais em qualquer tela. Eles se expandem ou encolhem com o espaço que são dados, o que mantém seu conteúdo legível e seu design equilibrado entre os dispositivos.

Vejamos um exemplo rápido para ver por que essa flexibilidade é importante. Suponha que você esteja construindo uma seção de imagem e defina sua largura para 1200px.

Isso pode parecer perfeito em um monitor grande, mas em um tablet com uma largura de tela de 768 pixels, a imagem pode transbordar e parecer estranha. Agora tente usar:

width: 100%;

Isso diz ao navegador para fazer a imagem preencher a largura de seu recipiente. Se a tela é larga ou estreita, a imagem se ajusta automaticamente.

O verdadeiro benefício de usar uma unidade relativa é a capacidade de resposta. Você não está apenas atribuindo um tamanho, mas fornecendo instruções claras ao navegador sobre como seu layout deve se comportar em diferentes cenários. E quando você acerta, seu conteúdo se encaixa em todas as tela.

Ao usar unidades relativas onde fazem sentido, você evita layouts rígidos, reduz a necessidade de pontos de interrupção e mantenha seu design mais fácil de gerenciar. E com o Divi, você não precisa escrever uma única linha de código para usar diferentes unidades CSS. Selecione a unidade desejada no construtor e consulte seu layout responder em tempo real.

Quando usar qual unidade CSS

Agora que você entende a diferença entre unidades absolutas e relativas, a próxima etapa é saber quando usar cada uma.

Como regra, vá com unidades relativas quando o layout precisar se adaptar a diferentes tamanhos de tela. Eles são perfeitos para larguras de seção, tipografia, espaçamento entre elementos ou layouts de página inteira. Por serem ampliados automaticamente, ajudam você a manter a consistência sem criar estilos separados para todos os dispositivos.

Por outro lado, as unidades absolutas são úteis quando você deseja que algo permaneça o mesmo, independentemente do tamanho da tela. Pense nas fronteiras, ícones, espaçamento fixo ou pequenos detalhes visuais.

Aqui estão alguns exemplos para orientar suas escolhas:

• Use PX quando precisar de controle exato, como para os tamanhos dos ícones. Como não se adapta, evite -o para larguras ou texto do layout.
• Use % quando você deseja que os elementos escalem com o recipiente.
• Use EM quando você deseja que o espaçamento seja dimensionado com o tamanho da fonte do elemento pai.
• Use o REM (comumente chamado de raiz EM) se você deseja um tamanho consistente em seu site. Como é baseado no tamanho da fonte raiz, mantém o espaçamento e a tipografia previsível.
• Use VW e VH para seções de tela cheia, áreas de herói ou espaçamento que responde diretamente à viewport (toda a visualização da tela do seu dispositivo).

Para um controle mais avançado, você também pode combinar unidades usando funções CSS. Calc () é útil ao misturar valores como 1Rem + 5VW para espaçamento responsivo com uma base mínima. E o Clamp () é ideal para definir valores de fluidos que crescem ou encolhem entre os limites, tornando -o uma alternativa mais limpa às consultas de mídia.

No final, a escolha da unidade certa envolve, considerando como cada elemento deve se comportar em diferentes cenários e escolher a unidade que melhor realiza isso.

As unidades avançadas da Divi para construir responsáveis sem codificar

Já vimos como as unidades CSS oferecem controle sobre o comportamento do layout. O Divi 5 pega esse controle e torna fácil usar com unidades avançadas.

Inscreva -se no nosso canal do YouTube

Com suporte nativo para %, EM, REM, VW e VH construído diretamente no construtor, você pode aplicar valores reais de CSS a módulos, seções, espaçamento e tipografia, sem precisar abrir um painel de código. Em qualquer campo numérico, basta selecionar sua unidade preferida no menu suspenso da unidade avançada, ajustar o valor e ver as alterações ao vivo.

E isso não para por aí. O Divi também permite que você use funções CSS avançadas como Calc () e Clamp () no Visual Builder. Isso significa que você pode criar valores de fluido, misturar unidades e layouts ajustados com o mesmo nível de desenvolvedores de precisão que recebem do CSS escrito à mão, mas visualmente.

Precisa de um tamanho de fonte que escala fluidamente em diferentes tamanhos de tela? Use Clamp (). Deseja compensar o espaçamento com uma mistura de valores fixos e flexíveis? Tente calc (). Divi lida com tudo, instantaneamente e visivelmente.

Você não está mais adivinhando ou alternando entre design e código. O Divi fornece o poder visual e o feedback instantâneo para obter a lógica responsiva corretamente com controle total sobre como seus elementos escalam e se comportam entre os dispositivos.

Aprenda tudo sobre as unidades avançadas do Divi 5

As unidades CSS sincronizam perfeitamente com os fluxos de trabalho avançados da Divi

Você já viu como o Divi facilita o uso de unidades CSS individuais dentro do construtor. Mas a força real mostra quando essas unidades trabalham juntas em todo o site. É aí que recursos como variáveis de design, predefinições de grupo de opções e funções CSS avançadas como Calc () e Clamp () realmente brilham.

O Divi não permite que você insira as unidades CSS nos campos. Ajuda você a integrá -los em todo o seu sistema de design sem escrever código. Tudo permanece consistente, escalável e mais fácil de manter.

Vamos ver como o Divi ajuda você a usar as unidades CSS como parte de um fluxo de trabalho flexível e orientado por lógica:

1. Crie lógica de layout com variáveis de design

Uma das maneiras mais fáceis de economizar tempo em qualquer projeto é planejar sua lógica de layout adiantada. Em vez de ajustar o mesmo espaçamento ou tamanho da fonte em vários lugares, você define esses valores uma vez e reutilizam -os em todo o seu design, com as variáveis de design da Divi.

Você pode criar valores reutilizáveis como –-acadding ou –section-gap, usando unidades CSS reais como 2REM, 5VW ou até fórmulas como Calc (2REM + 1VW). Uma vez definido, esses valores podem ser aplicados entre módulos, linhas e seções para manter tudo consistente.

Você só precisa atualizar a variável se quiser alterá -la mais tarde. A mudança reflete em todos os lugares que é usada, economizando o que você deve caçar configurações individuais. E como as unidades CSS são incorporadas diretamente no sistema da Divi, você não está confiando em suposições, mas aplicando visualmente a lógica CSS real. Isso torna seu layout mais gerenciável, escalável e mais fácil de ajustar à medida que o projeto cresce.

2. Use Cramp () e Calc () visualmente

Funções CSS como Clamp () e Calc () ajudam a criar layouts responsivos. Eles permitem definir valores flexíveis que ajustam os tamanhos da tela sem gravar consultas de mídia. Portanto, em vez de definir tamanhos fixos para cada dispositivo, você pode escrever lógica como grampo (1REM, 2VW, 2.5REM) para deixar o navegador escalar as coisas suavemente entre os limites definidos. Ou use Calc (100VH - 80px) para ajustar uma seção de heróis com base na altura da sua viewport.

Normalmente, eles exigem escrever CSS manualmente. No Divi, você pode inseri -los diretamente em qualquer campo numérico.

E como as unidades CSS são suportadas nas duas funções, você pode misturar valores como REM, VW e PX para obter exatamente o comportamento que deseja. Você vê os resultados ao vivo à medida que digita, o que facilita a experiência e a capacidade de resposta sem deixar o construtor.

3. Salvar a lógica da unidade com predefinições de grupo de opções

Depois de configurar layouts usando unidades ou fórmulas avançadas, você não precisa reconstruí -las novamente. O Divi permite salvar sua lógica de estilo, incluindo coisas como preenchimento: CLAMP (1REM, 3VW, 2REM), como uma predefinição de grupo de opções.

Isso significa que na próxima vez que você precisar do mesmo padrão de espaçamento ou layout, não aplica as mesmas configurações, mas apenas a predefinição salva.

E se você usar variáveis de design dentro de predefinições, é ainda melhor. Você pode criar facilmente um sistema interconectado no qual modificar os estilos de todo o site depende de apenas uma coisa: alterar a variável.

No Divi, o uso de uma unidade CSS não é apenas sobre tamanho; é sobre comportamento. Cada valor que você define se torna parte de um sistema visual que se adapta, escala e permanece consistente em seu layout. E como tudo está embutido no construtor, parece menos codificação e mais como projetar com a lógica.

Divi transforma unidades CSS em uma superpotência visual

Você não precisa escrever CSS para usar as unidades CSS. O Divi 5 traz todos eles em uma interface visual, onde você pode explorar, aplicar e visualizar em tempo real. Esteja você ajustando o espaçamento, a criação de tipografia do fluido ou criando lógica de layout com variáveis e predefinições, o Divi permite fazer tudo visualmente.

Pronto para experimentar? Faça o download do Divi 5 e comece a usar unidades CSS reais em seus designs.