CSS3: Media Queries

As media queries no CSS3 são uma ferramenta essencial para garantir que seu site seja responsivo e se adapte a diferentes tamanhos de tela.

[{"selector":"#anim-70538755-ef22-4ac2-8cb4-c13939df03ed [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-fe977a8a-c90a-4149-8fa5-5d4fe1d0b8ca","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-695755ce-6bab-49a4-ac93-59ca74a838b8","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-07c6c183-e54f-4d85-adc0-7919ebba1fd0 [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-d55def48-56ce-4891-bb9e-a75f446efcb1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dd22819f-3c3c-4ca4-a118-f19744be0ef0","keyframes":{"transform":["translate3d(115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c29d923-5142-4595-b069-a2e68614f109","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23777b1a-a587-490a-b7b9-c5f36d891ae8","keyframes":{"transform":["translate3d(-114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a7fcaf1-91a7-4875-a1ca-e14e823e2c03","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-04296b01-38ac-42a3-8a5c-d98e6e067305","keyframes":{"transform":["translate3d(115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como as media queries funcionam?

[{"selector":"#anim-4c135d84-c0ce-4921-8a73-ff5b669e7ec1 [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-e065ef1f-d630-4f76-8c2f-0f31450f5c1b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c7a2b56-f18e-403a-9f77-9678cc43eb46","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-87028c03-94a2-4205-97b2-e10ae7ee6938","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aed6471f-6f37-4ea6-a537-8e1b86862dfe","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-980d8212-402a-4776-b79a-1e51cd1ad852","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2baa55bf-6200-4b87-8d02-b2ae95169bbb","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"}] @media screen and (max-width: 600px) { /* regras CSS para telas com até 600 pixels de largura */ }

Como usar media queries?

[{"selector":"#anim-c2b2911d-cd5d-4eb8-95a8-fd6c12cc4624 [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-b344aadb-ec49-4063-aef2-09a61a3e52f7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f1fe0b54-e2ea-4699-acaf-406aaad47015","keyframes":{"transform":["translate3d(0px, -290.96303%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ad9b2332-dba3-4601-b729-ee9122bc21d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-68ee8d19-94b8-4022-b348-9a5b0868c1e4","keyframes":{"transform":["translate3d(0px, 196.17364%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ea0ef7c3-1125-4a5b-9130-7d681fa9c502","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] se você quiser que o tamanho da fonte seja maior em telas maiores, você pode definir a seguinte regra CSS dentro de uma media query: @media screen and (min-width: 800px) { body { font-size: 16px; } }

Melhores práticas

[{"selector":"#anim-83d72be1-bc58-450b-883f-df2565a16b0f [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-ff8fa94f-47ff-45ea-905e-b4e9b1f3ab44","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56ec618a-c20e-4938-a9a8-1446049a4578","keyframes":{"transform":["translate3d(-114.19558%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a186907b-2a8c-4051-8462-de165d1c8bf0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-df4e4d95-0db0-413f-965d-d92f49977832","keyframes":{"transform":["translate3d(115.45741%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db218225-bfc9-4e4d-8ab5-67738d1e808e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-16cfb322-a99e-478b-a772-11a0555f9a36","keyframes":{"transform":["translate3d(-114.19558%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Use media queries; Use a técnica mobile-first; Defina as media queries com base nas características do dispositivo em vez do tamanho da tela para garantir que seu site seja responsivo em diferentes dispositivos; Teste seu site em diferentes dispositivos para garantir que ele seja responsivo e que as media queries estejam funcionando corretamente.

Responsividade

[{"selector":"#anim-d8065214-890f-45a0-b0ec-bab7f0335f04 [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-f98675c4-6da2-4e12-965f-d27b87767c54","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f6805958-2f4d-48fc-a1b1-29073800bc85","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-9ec815db-70a2-4a67-8e3d-7a5ef25741f2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9cc19a71-9417-44f8-b87a-5b6ca51f3ec6","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-ecdec3df-4b68-4a20-b1b8-bfb6eb2a04c3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06118407-b2a6-421f-b7ba-ae5ceff71bff","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 Media Queries no CSS3

[{"selector":"#anim-314b2896-3286-400d-8f05-caff2221ee02 [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-1a9c83ee-b154-4675-b45b-a51198c835ad","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aef20271-99fe-499f-bc86-25786a33935e","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-f9b8efe9-15c3-4611-8363-1ec05f55b74b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f8dabcb-d0b8-427c-82ef-fd8c158ceea6","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

CSS3: Media Queries

As media queries no CSS3 são uma ferramenta essencial para garantir que seu site seja responsivo e se adapte a diferentes tamanhos de tela.

O que são?

As media queries são uma técnica do CSS3 que permite alterar o estilo de um elemento com base em certas características do dispositivo em que está sendo exibido.

Como as media queries funcionam?

As media queries funcionam com base em regras CSS condicionais. Por exemplo, você pode definir uma regra CSS que se aplica a telas de até 600 pixels de largura usando a seguinte sintaxe:

Como usar media queries?

Melhores práticas

Para garantir que seu site seja o mais responsivo possível, existem algumas melhores práticas que você pode seguir ao usar media queries:

Responsividade

Ter sites que sejam bem utilizados em qualquer dispositivo é super importante nos dias de hoje. Media queries veio como uma forma de fazê-lo de forma séria.

Aprenda mais sobre as Media Queries no CSS3

Confira nosso artigo completo sobre as Media Queries no CSS3 clicando logo abaixo!