A diferença entre unidades CSS absolutas e relativas

A escolha das unidades CSS certas é mais do que um detalhe técnico. É o que ajuda seu design a permanecer consistente, flexível e responsivo em todos os dispositivos. Os pixels podem parecer a opção fácil, mas nem sempre se comportam previsivelmente em telas diferentes.

Neste post, explicaremos a diferença entre unidades absolutas e relativas e mostraremos como o Divi 5 ajuda a usá -las com mais eficiência desde o início.

As unidades CSS explicadas: Por que elas importam para o seu site?

As unidades CSS controlam o tamanho de tudo em seu site. Escolha errado e seu design quebra em diferentes dispositivos.

A maioria das pessoas usa pixels porque é direta e fácil de compreender. Mas os pixels não se adaptam naturalmente bem ao design responsivo. Eles exigem consultas de mídia ou funções CSS como Clamp () para responder às alterações da tela.

Outras unidades se adaptam automaticamente. As unidades de viewport escalam com a janela do navegador. Unidades relativas como EM Tamanho são baseadas no texto circundante. Diferentes unidades resolvem problemas diferentes. Escolha bem, e seu design se adapta aos dispositivos sem trabalho extra.

Quebrar unidades absolutas: quando tamanhos fixos funcionam melhor

As unidades absolutas mantêm o mesmo tamanho, não importa o que aconteça ao seu redor. Se você definir algo para 20 pixels de largura, ele permanecerá 20 pixels, se alguém o vê em um telefone ou em um enorme monitor de desktop. O valor nunca muda com base no tamanho da tela, elementos dos pais ou configurações do navegador.

Pixels (PX) regra este espaço. Outras unidades absolutas, como centímetros, milímetros e polegadas, existem, mas pertencem ao design de impressão onde as medições físicas são importantes. Para o web design, os pixels lidam com quase todas as medidas absolutas que você precisará.

Por que os pixels funcionam muito bem para pequenos detalhes

Alguns elementos de design precisam de controle exato. Uma borda de 1 pixel deve parecer nítida e fina em todos os lugares. As sombras de gota precisam de precisão para parecer correta. Os pequenos ícones funcionam melhor quando permanecem consistentes entre os dispositivos.

Os pixels funcionam excelentemente para esses pequenos detalhes. A borda do botão deve ter com precisão 2 pixels de espessura, essa sombra sutil deve ser exatamente com deslocamento de 4 pixels, e seu ícone de navegação deve ser exatamente de 24 pixels para o alinhamento perfeito.

Essas medidas não precisam escalar com o tamanho da tela. Uma borda que é de 1 pixel na área de trabalho deve ficar 1 pixel no celular. Fazer com 2 pixels no celular pareceria grosso e desajeitado.

Outros elementos também funcionam bem com pixels. Os logotipos da marca geralmente usam pixels para consistência da marca. Pequenos elementos decorativos, como pontos ou linhas, precisam de dimensionamento exato. O carregamento de spinners e barras de progresso funcionam melhor com dimensões fixas.

Tornando os pixels responsivos com consultas de mídia

Os pixels não são completamente rígidos. As consultas de mídia permitem trocar diferentes valores de pixel em vários tamanhos de tela. Seu cabeçalho pode usar o texto de 32 pixels na área de trabalho e, em seguida, pule para 28 pixels em tablets e 24 em telefones.

Essa abordagem exige mais trabalho do que unidades relativas. Você precisa definir pontos de interrupção e escrever regras separadas para cada tamanho de tela, mas tem controle total sobre como as coisas ficam em cada tamanho.

Essa abordagem funciona bem quando você deseja controle específico em cada tamanho de tela. Você decide exatamente como seu texto fica em telefones versus tablets versus desktops em dimensões específicas. Sem surpresas.

O CSS extra vale a pena para elementos que precisam de dimensionamento preciso. Os logotipos parecem melhores quando permanecem exatamente do tamanho certo para cada dispositivo. Os elementos de navegação geralmente precisam de dimensões específicas para funcionar corretamente. As bordas e sombras decorativas dependem das medições exatas para parecer nítidas.

Compreendendo unidades relativas: a abordagem flexível do web design

Unidades relativas, em contraste, esticar e encolher com base no que está ao seu redor. Essa flexibilidade faz com que os sites funcionem em telefones, tablets e computadores sem quebrar. Ao contrário das unidades absolutas que permanecem fixas, as unidades relativas se adaptam ao tamanho da tela, elementos dos pais ou preferências do usuário.

Essas unidades resolvem os problemas que os pixels criam. Seu botão de 75 pixels funciona bem na área de trabalho, mas se torna dominante no celular. As unidades relativas ajustam automaticamente, economizando você de escrever estilos separados para cada tamanho de tela.

Como as unidades em EM se desenvolvem

As unidades EM são relativas ao tamanho da fonte do elemento pai imediato. Se o tamanho da fonte base for 16px e você define um contêiner para o tamanho da fonte: 1.25em, isso se tornará 20px. Um elemento filho dentro dele definido como 1.5em agora será de 30px (1,5 × 20px), não 24px, porque é baseado no pai, não na raiz.

Esse efeito de composição é poderoso para espaçamento escalável em torno do texto. Mas se você continuar aninhando elementos com tamanhos de fonte baseados em EM, seus valores poderão aumentar o tamanho rapidamente. As unidades EM funcionam melhor para preenchimento, margem ou elementos intimamente ligados ao texto próximo. Para dimensionamento consistente em seu layout, considere usar o REM.

As unidades REM mantêm as coisas simples

O REM sempre olha para o elemento raiz html. Defina algo como 2REM e é do mesmo tamanho em todos os lugares da sua página.

A maioria dos navegadores padrão é 16px para a raiz. Então 1Rem = 16px, 2Rem = 32px. Altere o tamanho da raiz e tudo mais baseado em REM.

Unidades de viewport seguem sua tela

As unidades de viewport escalam com a janela do navegador. 50VW = metade da largura da tela e 100VH = altura da tela cheia. Isso é ótimo para seções de heróis que preenchem a tela.

Os navegadores móveis geralmente não jogam bem com as unidades de viewport. A barra de endereços se esconde e mostra quando você rola e sua seção de 100VH pode ser cortada quando a barra de endereços aparecer.

VMIN e VMAX comparam a largura e a altura da sua tela e escolhem um. O VMIN usa o que for menor. Em um telefone mantido na vertical, a largura é menor, então 50Vmin = 50% da largura. Gire para a paisagem e a altura se torna menor; portanto, 50Vmin alterna para 50% da altura. O Vmax faz o oposto: sempre escolhe a dimensão maior. Isso é útil para elementos que precisam escalar com a maior medição.

Porcentagens se adaptam aos contêineres

As larguras baseadas em porcentagem sempre se relacionam com a largura do elemento pai. As porcentagens de altura podem escalar da mesma maneira, mas apenas se o pai tiver uma altura definida; Caso contrário, eles podem não funcionar como esperado.

As porcentagens de preenchimento e margem são sempre calculadas a partir da largura dos pais, mesmo para os valores superior e inferior. Isso possibilita criar espaçamento consistente e layouts proporcionais, especialmente em projetos de fluidos.

A diferença

As unidades absolutas são como um governante rígido, enquanto as unidades relativas se comportam mais como uma fita de medição. Ambos medem as coisas, mas respondem de maneira muito diferente quando as condições mudam. Aqui está como eles se comparam:

A maioria dos desenvolvedores acaba usando os dois: pixels para as pequenas coisas que precisam permanecer nítidas e relativas para as grandes peças estruturais que precisam flexionar.

Escolhendo as unidades certas para o seu design

Diferentes partes do seu site precisam de abordagens diferentes. Alguns elementos ficam do mesmo tamanho em todos os lugares, enquanto outros se adaptam com base no tamanho da tela ou nas configurações do usuário. A maioria dos desenvolvedores pensa demais. Há uma maneira mais direta: corresponda à unidade com o que você deseja que esse elemento faça.

Pense nos seus usuários primeiro

As pessoas navegam no seu site de maneiras inesperadas. Alguém visita o telefone deles. Seu texto parece pequeno, para que eles prendam o zoom. Se você construiu com unidades REM, tudo cresce em conjunto. Se você usou pixels em todos os lugares, as coisas começam a se sobrepor e quebrar.

A navegação principal precisa de dimensionamento consistente nas páginas. As unidades REM vinculam -o ao tamanho da fonte base. Seu logotipo precisa de dimensões exatas para a consistência da marca. Pixels mantêm -o nítido.

Muitos usuários alteram o tamanho da fonte padrão do navegador para obter melhor legibilidade. Quando você tem codels de codelas, você ignora suas preferências. Se alguém diminuir para 125%, seu layout baseado em pixels se desfaz. As unidades relativas se adaptam automaticamente.

Maneiras rápidas de escolher a unidade certa

Veja como dividir suas escolhas sem se perder nos detalhes:

• Texto e espaçamento ao redor: use em ou rem. Escalas de preenchimento de botões com tamanho de texto. As margens permanecem proporcionais aos títulos.
• Elementos relacionados à tela: use unidades de viewport. Seções de heróis que preenchem a maioria das telas. Barras laterais que tomam porcentagens de tela específicas.
• Elementos que precisam de controle exato: use pixels. Bordas finas que ficam nítidas. Pequenos ícones com alinhamento perfeito. Solte as sombras com compensações precisas.
• Elementos baseados em contêineres: Use porcentagens. Grades flexíveis que se adaptam aos pais. Imagens que escalam com recipientes.

Comece simples. Use pixels para bits decorativos, REM para texto e espaçamento relacionado, unidades de viewport para seções do tamanho de uma tela e porcentagens para recipientes flexíveis. Escolha um sistema para elementos relacionados e siga -o.

Erros de unidade CSS comuns para evitar

Você escolhe pixels para tudo porque eles se sentem seguros. Seu botão parece perfeito com 75 pixels de largura no seu laptop. Então alguém abre seu site no telefone deles e esse mesmo botão come metade da tela. Seu logotipo precisa de dimensões exatas, mas suas áreas de conteúdo precisam de flexibilidade. Misture essas abordagens aleatoriamente e você cria caos. Então, aqui estão algumas dicas sobre como evitar erros de unidades CSS padrão:

1. Escolher pixels para tudo

Os pixels se sentem seguros porque 20 pixels significa 20 pixels. Simples, certo? Sua barra lateral de 300 pixels funciona bem na área de trabalho. No celular, torna -se um bloco enorme que esmaga seu conteúdo em uma tira fina. Seu texto de 16 pixels se torna ilegível em telas de alta densidade.

Quando alguém aumenta o tamanho da fonte do navegador, seu layout baseado em pixels não se adapta. O texto transborda de contêineres. Os botões desaparecem atrás de outros elementos. Sua barra lateral colide com seu conteúdo principal.

Salve pixels para coisas que realmente precisam de controle exato: bordas finas, ícones pequenos e sombras. Para todo o resto, tente usar unidades relativas.

2 unidades em EM que se multiplicam fora de controle

A escala de unidades EM com base no tamanho da fonte dos pais. Isso parece flexível, até você começar a nidificar. Digamos que seu contêiner use 1.2em e sua direção para dentro dele usa 1.5em. Esse título se torna 1.8EM em relação à raiz porque 1,2 × 1,5 = 1,8. Continue nidificando, e os tamanhos podem bola de neve. Altere o tamanho da fonte de um pai e tudo a jusante muda.

Unidades REM corrigem isso. Eles sempre fazem referência ao elemento raiz, então o 2REM significa a mesma coisa, não importa onde seja usado. Isso facilita a escala e o controle da sua tipografia.

3. Unidades de viewport que saltam no celular

Defina sua seção de herói como 100VH e enche a tela perfeitamente. Exceto os navegadores móveis escondem e mostram suas barras de endereço quando você rola. Safari no iOS e Chrome no Android fazem isso. Quando a barra de endereço desaparece, sua seção de 100VH se torna de repente muito alta. Quando reaparece, seu conteúdo é cortado.

A unidade DVH mais recente se adapta ao tamanho da viewport em alteração. O suporte do navegador ainda está se atualizando. Como fallback, uma solução JavaScript usando o CSS Custom Properties Works.

Quebrando a acessibilidade com tamanhos fixos

Os usuários geralmente ajustam o tamanho da fonte padrão do navegador para melhorar a legibilidade. Quando você tem texto, botões e espaçamento de código de hardcode usando pixels fixos, seu layout pode quebrar - o texto pode transbordar, os botões podem se tornar inutilizáveis e elementos críticos podem desaparecer em níveis mais altos de zoom.

Recomenda -se que os alvos de toque sejam de pelo menos 44 × 44 pixels CSS, de acordo com diretrizes de acessibilidade como o WCAG e os padrões da Apple. Alvos menores podem ser desafiadores para os usuários com deficiências motoras explorar com precisão.

Em vez de travar em tamanhos fixos, use unidades escaláveis como o REM para criar layouts que respeitem as preferências do usuário. Defina o tamanho da fonte base no elemento e, em seguida, escala consistentemente títulos, botões e espaçamento com unidades relativas em seu site.

5. Texto minúsculo em telas de alta densidade

Diferentes dispositivos embalam pixels de maneira diferente. A tela do seu telefone pode ter 400 pixels por polegada, enquanto o monitor tem 100. A mesma contagem de pixels parece completamente diferente em cada dispositivo.

Seu texto de 14 pixels parece bom em um monitor de desktop. Em uma tela telefônica de alta densidade, esses mesmos 14 pixels se tornam microscópicos. Os usuários apertam e apertam o zoom.

Os sistemas operacionais e os navegadores lidam com a escala automaticamente quando você usa unidades relativas. Seu texto 1Rem se torna maior em telas de alta densidade e menor em densidade de baixa densidade.

6. unidades de mistura sem plano

Você usa o REM para alguns títulos, EM para outros e pixels para o texto do corpo. Seu design não possui ritmo porque diferentes elementos escalam a taxas diferentes. Escolha um sistema para elementos relacionados. Se seus títulos usarem o REM, todos os seus títulos devem usar o REM. Se o seu espaçamento o usar, continue usando EM para espaçamento relacionado.

Teste suas opções entre dispositivos e configurações do usuário. Verifique como o seu design fica quando alguém aumenta o tamanho da fonte. Alguns minutos de teste economizam horas de correções de bugs posteriormente.

Como as unidades avançadas da Divi 5 simplificam o gerenciamento de CSS

Lutando com unidades CSS envelhece rapidamente. Você gasta horas aprimorando valores, testando em diferentes dispositivos e corrigindo layouts quebrados. Divi 5 muda isso completamente. O novo sistema tira as suposições da seleção de unidades e fornece controle visual sobre comportamento responsivo sem tocar o código. Mas primeiro, vamos entender o que é divi.

O que é Divi?

Divi é um construtor de sites que transforma o WordPress em algo que realmente faz sentido para as pessoas que desejam que seus sites pareçam bem.

Arraste qualquer um dos mais de 200 módulos em torno da sua página. Altere o texto exatamente onde está. Escolha novas cores e observe -as aparecer imediatamente. Você está trabalhando na coisa real, não em algum modo de visualização que está para você.

O tema inclui mais de 2000 layouts que não são péssimos. Designs reais para restaurantes, fotógrafos, consultores e dezenas de outras empresas. Encontre um que você gosta e ajuste -o até que pareça certo.

O construtor de temas permite controlar tudo. Crie cabeçalhos que não pareçam genéricos, crie páginas de blog de destaque e transforme suas 404 páginas em algo que as pessoas realmente querem ver.

Construa sites usando ai

Divi Ai funciona bem dentro de sua área de design. Precisa de texto? Ele escreve.

Quer imagens? Isso os faz. Você pode até descrever edições de fotos e isso lida com o trabalho.

Da mesma forma, para código e novas seções.

O Divi Quick Sites resolve aquele momento terrível em que você olha para uma página vazia sem idéia por onde começar. Escolha nos sites iniciais que nossa equipe realmente projetou, completa com imagens e obras de arte originais.

Ou descreva seu negócio para dividir sites rápidos + divi ai e deixe construir algo do zero.

Esses sites criados na IA terão manchetes, cópias e imagens reais que correspondem ao que você disse. Gere tudo com a IA, pegue fotos do Unsplash ou solte os espaços reservados para suas próprias fotos. Defina suas fontes e cores primeiro e depois deixe a IA trabalhar em torno delas. Você ainda pode editar tudo depois.

O que há de novo no divi 5

Divi 5 reconstrói tudo do zero. Descobrimos o sistema de shortcode antigo e construímos algo que funciona melhor com os padrões da Web de hoje. Os sites carregam mais rápido, o editor responde mais rápido e você obtém acesso a ferramentas que eram impossíveis antes.

Mas o que há de novo? Dê uma olhada:

Sistema de layout do Flexbox

Construir sites modernos e responsivos no Divi agora é mais rápido e mais intuitivo. Introduzimos um sistema completo de layout do Flexbox no Divi 5, oferecendo controles simples para alinhamento vertical, embalagem de conteúdo e espaçamento. Crie os layouts exatos que você deseja sem lutar com código ou usar soluções alternativas complexas.

Predefinições de grupo de opções

Predefinições de grupo de opções permitem salvar estilos que você pode misturar e combinar em qualquer lugar. Faça um estilo de sombra uma vez e use -o em botões, cartões, seções, o que quer que precise. Atualize a predefinição e tudo muda instantaneamente em todo o site.

Variáveis de design

Cores da marca, fontes e espaçamento vivem em um local agora. Você pode mudar de azul para verde editando uma variável. Todas as atualizações do site inteiras automaticamente, para que você não precise caçar dezenas de módulos.

Unidades avançadas

Agora, você pode usar todas as unidades CSS avançadas com o Divi 5: de PX para VW/VH. As funções CSS também funcionam bem no construtor agora. Quer uma seção que seja 80% da altura da tela menos seu cabeçalho? Digite calc (80VH - 100px) e você está definido. A interface lida com Clamp (), min (), max (): todos esses truques responsivos.

Linhas aninhadas

As linhas entram em outras linhas agora, o mais profundo que você precisa. Construa layouts complexos de revistas ou páginas detalhadas de produtos sem combater a estrutura. Cada nível fornece controle total sobre o espaçamento e o comportamento do dispositivo.

Edição com um clique

Aponte e clique em qualquer lugar da sua página para começar a editar. Os dias de busca de pequenos botões de edição ou navegar por vários menus estão atrás de nós.

Pontos de interrupção personalizáveis

Em vez de ficar preso a três, os pontos de interrupção personalizáveis da Divi 5 permitem ativar sete tamanhos de tela diferentes. Defina cada ponto de interrupção exatamente onde seu design precisa, seja 1200px para monitores grandes, 900px para tablets ou 650px para telefones.

Espaço de trabalho com vários painéis

Organize seus painéis de espaço de trabalho como quiser. Mantenha vários painéis de configuração abertos simultaneamente, em vez de pular constantemente entre diferentes áreas de interface.

Gerenciamento de atributos

Copie elementos específicos entre diferentes partes do seu site com precisão cirúrgica. Pegue apenas o espaçamento de um elemento, apenas as cores de outra, ou apenas as predefinições de um terceiro. Não há mais transferências tudo ou nada.

Escala de tela

Ajuste o tamanho do seu espaço de trabalho para visualizar como seu site aparece em diferentes dispositivos. Consulte as vistas móveis, tablets e desktop sem alternar para os modos de visualização separados.

Melhorias de desempenho

Tudo parece mais rápido agora. As páginas carregam mais rápido, o construtor responde mais rápido e layouts complexos não atolam a interface como costumavam.

Grupos de módulos

Bacaco vários módulos em um contêiner. Trate blocos de texto, imagens e botões como uma única unidade. Mova -os juntos, estilize -os juntos e copie tudo para outras páginas.

Sistema de cores HSL

Construa esquemas de cores com controles de matiz, saturação e leveza. Crie variações de cores da marca que parecem profissionais. A matemática cria combinações agradáveis automaticamente.

Mais estão a caminho ...

• Loop Builder: Construa modelos para repetir conteúdo, como grades de blog ou listagens de produtos. Projete -o uma vez, deixe o sistema preencher -o com seu conteúdo real.
• Módulos WooCommerce: módulos específicos da loja para grades de produtos, páginas de produtos individuais e funcionalidade de carrinho. Tudo o que as lojas on -line precisam, construídas especificamente para venda.

Usando variáveis CSS no Divi 5

O estilo de site se torna tedioso quando você precisa de valores consistentes em vários elementos. As variáveis CSS resolvem isso armazenando valores reutilizáveis em um local. O Divi 5 suporta variáveis CSS tradicionais e seu próprio sistema de variáveis de design, oferecendo flexibilidade na maneira como você gerencia a aparência do seu site.

O Divi 5 aceita qualquer unidade CSS diretamente em seus campos de entrada. Escreva valores REM, VW ou percentual, onde você só poderia usar apenas pixels. O construtor processa essas unidades imediatamente sem configuração adicional.

As funções CSS funcionam da mesma maneira. Digite o grampo (1REM, 4VW, 3REM) para tipografia de fluidos ou min (500px, 90%) para larguras responsivas. O Visual Builder lida com esses cálculos em tempo real enquanto você projeta.

As variáveis se integram perfeitamente a este sistema. Defina uma variável CSS Like –Head-Hight: 80px e faça referenciar-a usando var (–-tenhora-altura) em qualquer campo. O Divi reconhece a sintaxe e aplica seu valor armazenado automaticamente.

Essa integração direta significa que você pode misturar unidades tradicionais, funções CSS modernas e variáveis no mesmo projeto. Use pixels para bordas, unidades de viewport para seções e variáveis para medições repetidas.

Variáveis de design: uma maneira melhor de aplicar unidades avançadas

As variáveis de design são alternativas internas do Divi 5 às variáveis CSS. Eles funcionam inteiramente através da interface visual sem exigir nenhum conhecimento de código. Você cria e gerencia essas variáveis usando o Painel de Gerenciador de Variáveis da Divi.

Essas variáveis se estendem além de números e cores simples. Armazene URLs de imagem completa, conteúdo de texto ou valores complexos de estilo. Quando você atualiza uma variável de design, todos os elementos que o usam mudam instantaneamente em todo o site.

O Divi 5 oferece vários tipos de variáveis para lidar com diferentes necessidades de conteúdo:

• As variáveis de cores armazenam códigos hexáticos, gradientes, cores da marca, cores de texto, fundos e bordas.
• As variáveis de fonte gerenciam a tipografia globalmente além das limitações do personalizador de temas e do trabalho para quaisquer áreas de texto.
• As variáveis de números aceitam qualquer unidade CSS mais funções CSS como Clamp (), Calc (), Min () e Max () para espaçamento, dimensionamento e animação.
• As variáveis de imagem armazenam imagens reutilizáveis, como logotipos, fundos e padrões.
• As variáveis de texto armazenam seqüências de texto reutilizáveis, como informações de contato, slogans e detalhes da empresa.
• As variáveis de URL armazenam links reutilizáveis para mídias sociais, afiliados, promoções e links Tel/Mailto.

Configurando unidades CSS com variáveis de design de números

As variáveis de números fornecem os blocos de construção para projetos que permanecem consistentes. Eles funcionam melhor quando você repete a mesma medição em diferentes elementos. Além disso, eles são muito mais simples do que a luta com o código CSS.

Encontre o gerenciador de variáveis em sua interface Divi. Crie uma nova variável de número e forneça um valor que se encaixe no seu design. Use nomes claros como "acionamento de botões" ou "gap de seção" em vez de rótulos vagos.

Criando sua biblioteca variável

Você pode adicionar variáveis comuns, como:

• “Altura de botão” no 3REM-Buttons escala com tamanho de texto
• “Padding de seção” a 8VH-espaçamento adapta à altura da tela
• "Radio de fronteira" em 0,5rem-cantos arredondados permanecem proporcionais
• “Hero-Hight” a 75VH-Seções de heróis enchem a maioria das telas
• “Fine-Border” a 1px-linhas nítidas permanecem nítidas
• "Fluid-text" no CLAMP (1REM, 2.5VW, 2REM)-Escalas de texto sem problemas
• “Content-Width” em min (90%, 1200px)-os contêineres permanecem legíveis
• “Gap Dynamic” em Calc (2Rem + 2VW)-O espaçamento cresce com o tamanho da tela

Aplique -os nas configurações do seu módulo, seção ou linha.

Suas variáveis REM escalam com o tamanho do texto. As unidades VH se adaptam a telas menores. Variáveis com CLAMP () Ajuste automaticamente entre seus valores mínimos e máximos.

Construindo predefinições conectadas

Depois de modelar seu elemento com variáveis, salve o espaçamento como um grupo de opções predefinido. Esta predefinição agora mantém referências às suas variáveis de números.

Quando você aplica essa predefinição a outros módulos, eles herdam o mesmo espaçamento baseado em variável. Atualize o “cadeia de cartões” do 2Rem para o 3REM no Variable Manager e todos os elementos usando as atualizações predefinidas automaticamente.

A predefinição permanece a mesma, mas os valores mudam. Isso funciona para todas as variáveis de design: cores, fontes, imagens, texto e URLs. Suas predefinições se tornam dinâmicas em vez de estáticas, possibilitando as atualizações em todo o site com uma única alteração.

Construa sites melhores com unidades CSS e divi 5

Obter as unidades CSS certas muda como você cria sites. Você consertará menos layouts quebrados e criará designs que funcionam entre os dispositivos. Pixels prendem detalhes precisos. As unidades relativas se adaptam a diferentes telas e preferências do usuário.

O Divi 5 facilita a construção de unidades CSS avançadas. Digite qualquer unidade no construtor e veja os resultados instantaneamente. As variáveis de design mantêm as medidas consistentes em todo o seu site. Altere um valor e tudo o que conectou atualizações automaticamente.

Seus sites merecem mais do que as batalhas do ponto de interrupção e as intermináveis correções de layout. Experimente o Divi 5 e observe as unidades CSS transformar sessões de design frustrantes em fluxos de trabalho suaves.