CSS: O que é Viewport

O viewport no CSS3 é uma ferramenta importante para garantir que seu site ou aplicativo web seja responsivo em diferentes tamanhos de tela.

[{"selector":"#anim-3b28c027-e070-4449-94c4-1cd99154c007 [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-17da1fc6-05a6-458d-861d-db165530ca90","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-12c7617f-693e-42bd-979c-32633cde175b","keyframes":{"transform":["translate3d(0px, -195.06867%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5136a6b9-80ad-4ffe-9c58-998cd70c4bd8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab40e65d-d89b-4ce9-b219-0a791b783c83","keyframes":{"transform":["translate3d(0px, 191.02793%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é viewport?

[{"selector":"#anim-714f6291-c0fd-4848-bec9-d494bdfeea15 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-62.44873024089035%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-523c2c87-f672-4868-8f47-6d3e4d9c4778","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4690bfc5-c4e8-411d-9982-cc7aae9590d3","keyframes":{"transform":["translate3d(115.40880%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-01d0025e-789a-4ccf-9a82-abe99d1163bc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ddc94ed9-352f-411b-985d-f3b336b049d8","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11419ced-5d85-468e-b941-cdd7824310e0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f94d5a98-a08d-4c52-b9b8-d20a7c499c8f","keyframes":{"transform":["translate3d(114.46540%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como definir o viewport?

[{"selector":"#anim-8f004815-c0da-4e91-a594-08c7f019bbb6 [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-54e965fa-4248-45e0-a800-a14b91cc2c17","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c631b246-8350-4eac-879b-21142ed257f0","keyframes":{"transform":["translate3d(0px, -174.66385%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-534f4743-b74a-415b-b88d-cb5abafc0837","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fde84d81-9730-4f58-a430-ba8c73e51b43","keyframes":{"transform":["translate3d(0px, 156.02950%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f7ed9a8-cf50-477c-9a0d-13502f98f70d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c99792da-8c64-4ae3-8e5b-d78a2023aae9","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Propriedades do viewport

[{"selector":"#anim-49b9b23b-9082-413a-b2f6-b411cae59a6e [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-15cec905-f312-406e-b26b-8fdc63a89abc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-58cc0005-d66c-43e6-864e-5c7eb11be728","keyframes":{"transform":["translate3d(113.97516%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e0b34d22-099a-42b4-b82e-018372f1348d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-312cb4f1-c41e-4bb9-848d-cf08df6fd9ca","keyframes":{"transform":["translate3d(-114.05751%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-868c6f07-5de0-4cee-9720-d91e17f29f44","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3c3ade57-db98-49b3-b088-cd74792a93e4","keyframes":{"transform":["translate3d(118.00643%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-030709ce-5c36-4bc5-bcc9-f61c7c0d6453","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d56dfad8-9044-4ce1-b652-c57994b3bf7d","keyframes":{"transform":["translate3d(-114.05751%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Exemplos de viewport

[{"selector":"#anim-dda54a88-f7ab-4b7e-a6b0-1328bd25b3b0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(14.392977369825196%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d8c11a68-d918-4f42-b14c-2504db632ccc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-02f204ba-d737-4990-9c6e-b68c6951bf3a","keyframes":{"transform":["translate3d(0px, -162.96296%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d6109a23-01aa-471e-942d-57d09475bd1f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2aeb1822-7114-4889-9b2f-2fad3c067f39","keyframes":{"transform":["translate3d(0px, 393.95220%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99409431-ed11-4af5-9407-80e59fbcf598","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53a92ae9-2562-46f4-adcb-cf428244a7ca","keyframes":{"transform":["translate3d(-112.88343%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d6eb98e0-f73c-49db-9713-d2b4991508a7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9a9148ed-f547-4185-9bbc-f4118b2dbac9","keyframes":{"transform":["translate3d(0px, 267.36991%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

É importante estar em todos os tipos de tela para que o seu site alcance o maior número de pessoas possível!

[{"selector":"#anim-f8c2de63-3737-44c6-b9fd-ab30f5522749 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.246337776828504%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-b49d9203-c962-4845-b5e4-89d9927a78cd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-64dfa0a3-9d8e-444f-ab85-7ff55018e77e","keyframes":{"transform":["translate3d(115.65496%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4ad41b45-d97b-4ca3-8fa4-fe5bacf7e113","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-058a41d2-ab3b-43f3-a302-c0caaf29a3bc","keyframes":{"transform":["translate3d(-115.97444%, 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 Viewport!

[{"selector":"#anim-c690c027-4f97-4e1b-8741-fee9bc4649a8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4cd7a9ea-2a53-44b8-a9cb-f37c55aeaa14","keyframes":{"transform":["translate3d(-113.58024%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-157d4383-d47f-4652-8826-aa8fb6794ce5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25a9e725-10da-45fc-b390-60c3e4fe8a3b","keyframes":{"transform":["translate3d(118.32797%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4cabdccb-bfce-455f-a840-462811f1c1eb [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"}] Leia mais

CSS: O que é Viewport

Confira a responsividade do CSS3 em diversas telas.

O viewport no CSS3 é uma ferramenta importante para garantir que seu site ou aplicativo web seja responsivo em diferentes tamanhos de tela.

O que é viewport?

O viewport é a área de exibição da tela onde o conteúdo da página é exibido. Em dispositivos móveis, o viewport pode ser menor do que a largura da tela, o que pode afetar a aparência do seu site.

Como definir o viewport?

Para definir o viewport em seu site, adicione a seguinte meta tag ao cabeçalho da sua página HTML: <meta name="viewport" content="width=device-width, initial-scale=1">

Propriedades do viewport

Existem várias propriedades que podem ser usadas para ajustar o viewport em seu site.

width; height; initial-scale; maximum-scale; minimum-scale.

Exemplos de viewport

Para entender melhor como o viewport funciona na prática, por exemplo:

Layout responsivo; Área de exibição; Zoom.

É importante estar em todos os tipos de tela para que o seu site alcance o maior número de pessoas possível!

Esteja em qualquer tela!

Aprenda mais sobre Viewport!

Confira o artigo completo clicando logo abaixo!