Como Funcionam as Medidas no CSS

As unidades de medida são essenciais para criar layouts precisos e responsivos no CSS3.

[{"selector":"#anim-4edf1411-d3c5-476e-8f14-24d1d24db50d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-8.65384613334659%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-7c240587-e772-473e-88ef-446a8bda2804","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccb919d8-04db-4f6d-b4cb-4b848637f7c6","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que são?

[{"selector":"#anim-2c709738-5328-40c2-80ca-efad03e337ab [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b9a412c4-e382-4067-a4b4-bc6bb2b9d5c4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b17ddfed-eb2b-4764-9ad8-75bf8b0c5a55","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd058d59-83c6-4cab-91ed-a050aaa70efb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-65eba152-56d9-45bf-a2aa-977e204a3b8e","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7739450e-21ea-4bbe-b007-c3e84d4904fb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b39bab3-7a57-426e-b682-f3173193f341","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Unidades Absolutas no CSS3

[{"selector":"#anim-813a2e23-80ed-46de-b473-6240fb7d3638 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(3.2451923622161547%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-59ea6c60-d79c-4465-b739-8c762deefe1b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-79edf27c-ffa7-47da-9df7-5c223bc3a8a8","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f2daf2e-1a89-4c2b-a767-5ca766ef7c0e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-901e3df5-cbf1-4d01-987d-8e8fc24328e2","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e22192ef-1254-49d8-93ad-4c8c6b0bda71","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06e6e3a7-40f3-47c4-b33a-948b277900ee","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Unidades Relativas no CSS3

[{"selector":"#anim-04c134fa-3f5b-4342-aff9-11c0f33eb2ac [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-2.8836781677303627%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-eb9cd4df-63ae-4e55-90e8-a3585294daca","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a12c4d6e-41ee-44a2-9246-c9967e9fa021","keyframes":{"transform":["translate3d(0px, -251.60822%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7d59ad8b-43f9-4e46-9285-730706555f8f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-20b1d43e-f3c7-49dd-b056-0dd8ee8455e4","keyframes":{"transform":["translate3d(0px, 153.65983%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9d9f5949-4f24-42ed-821b-d6758033a774","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}]

Outras Unidades de Medida

[{"selector":"#anim-5f27c5ac-ea63-4c95-bd08-ff59521b65ed [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(28.897839285828507%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-0b1bdecf-dc1a-46ae-8018-e1aa9501cde8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bb705afb-a655-4c7b-8333-8e95b97d1c4f","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-579ede43-6776-481d-b99a-89dffdd1bb16","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-21a6cf4f-6987-4dae-90e1-ea41e5c7eed1","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3dacc10a-c63c-49cc-9587-e6b5de696525","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c2394ce-0de6-4823-84fe-9cd80be77650","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Escolher a Melhor Unidade de Medida

[{"selector":"#anim-8bf7c36c-e183-479c-b812-d42b1080e324 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-40.80528826203376%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-8024fdfc-c6f9-46b5-b256-70d6a29e4ddf","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e3f9c920-5c3f-4971-a62c-19f719f12550","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ddd5551f-d4b1-4da7-926a-5cdc132a0843","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ff781ce-ff51-4044-999c-d7f77803a99f","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e955267d-4ac6-4e97-9882-2267fbecac1d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2f56f4a8-c29a-480a-99e5-081848cd2f6e","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre as Unidades de Medida no CSS3

[{"selector":"#anim-bf9998d1-67ac-4b65-ac1b-70876aa9285f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-1549e8e1-6d59-4fa1-b89e-d1eda1405ea0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d2d25122-5cd0-4e54-9f87-9676d38f7c0b","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-90753728-76ad-43ca-9431-6d58d9d10029","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c5a9bf9-8999-47e5-b44c-be16e8f50f5a","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Artigo completo

Como Funcionam as Medidas no CSS

As unidades de medida são essenciais para criar layouts precisos e responsivos no CSS3.

O que são?

As unidades de medida no CSS3 são usadas para especificar tamanhos e posições de elementos em uma página da web. Existem dois tipos de unidades de medida: absolutas e relativas.

Unidades Absolutas no CSS3

As unidades absolutas mais comuns no CSS3 são "px", "pt" e "in". O "px" é a unidade mais usada, pois é a mais precisa e fácil de entender.

o "pt" e o "in" também podem ser úteis em algumas situações específicas, como ao trabalhar com impressão.

Unidades Relativas no CSS3

As unidades relativas mais comuns no CSS3 são "em" e "rem". O "em" é baseado no tamanho da fonte do elemento pai, enquanto o "rem" é baseado no tamanho da fonte do elemento raiz (normalmente o "html").

Outras Unidades de Medida

Além das unidades absolutas e relativas, o CSS3 também possui outras unidades de medida, como o "vh", o "vw", o "vmin" e o "vmax".

O "vh" e o "vw" são baseados no tamanho da janela de visualização, enquanto o "vmin" e o "vmax" são baseados no tamanho do menor ou maior valor entre a altura e a largura da janela de visualização.

Escolher a Melhor Unidade de Medida

Ao escolher a melhor unidade de medida no CSS3, é importante levar em consideração o objetivo do elemento e o tipo de layout que está sendo criado. Confira mais detalhes em nosso artigo no próximo storie.

Aprenda mais sobre as Unidades de Medida no CSS3

Confira nosso artigo completo sobre as unidades de medida no CSS3 clicando logo abaixo!