Meta tags:
description=Use a regra at-rule @media para aplicar estilos com base em media queries. Aprenda a usar essa propriedade com exemplos práticos.;

Headings (most frequently used words):

de, media, exemplo, regra, com, mídia, da, uso, para, em, dispositivos, css, como, uma, query, construída, sintaxe, combinando, condições, operadores, lógicos, tipos, características, prática, resultado, aparência, alterada, div, ocultar, um, elemento, muito, pequenos, alterar, cor, fundo, do, conteúdo, diferentes,

Text of the page (most frequently used words):
width (45), media (44), color (37), border (35), css (33), background (26), text (25), #dispositivo (24), min (23), style (22), font (21), para (20), and (20), html (19), grid (19), max (18), uma (16), the (16), aprender (15), body (15), mídia (14), viewport (13), screen (13), column (13), com (11), height (11), que (11), rule (11), verifica (10), não (10), padding (10), break (10), como (9), overflow (9), div (9), title (9), top (9), right (9), left (9), bottom (9), image (9), animation (9), query (8), podem (8), largura (8), saída (8), valor (8), content (8), head (8), position (8), stroke (8), características (7), page (7), altura (7), queries (7), por (7), cor (7), regra (7), decoration (7), offset (7), flex (7), condições (6), ser (6), estilos (6), área (6), exibição (6), for (6), exemplo (6), example (6), align (6), margin (6), type (6), variant (6), w3docs (5), todos (5), verificar (5), usado (5), resolução (5), mecanismo (5), entrada (5), número (5), bits (5), entre (5), característica (5), você (5), copiar (5), only (5), box (5), size (5), transition (5), line (5), last (5), outline (5), radius (5), child (5), formatter (5), code (4), generator (4), prática (4), javascript (4), operadores (4), lógicos (4), sintaxe (4), navegador (4), orientação (4), são (4), pode (4), conteúdo (4), resolution (4), mínima (4), monochrome (4), aspect (4), ratio (4), máxima (4), cores (4), experimente (4), mesmo (4), class (4), doctype (4), all (4), not (4), quando (4), mode (4), transform (4), fill (4), list (4), template (4), row (4), gap (4), nth (4), first (4), sobre (3), json (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), exemplos (3), tipos (3), this (3), tipo (3), página (3), usadas (3), aparência (3), pointer (3), bloco (3), componente (3), light (3), usuário (3), cursor (3), hover (3), mais (3), mas (3), resize (3), document (3), uso (3), dispositivos (3), display (3), telas (3), propriedade (3), efeito (3), vírgula (3), 768px (3), pixels (3), wider (3), 200 (3), base (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), columns (3), auto (3), direction (3), clip (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), web (2), desde (2), combinando (2), construída (2), aplicar (2), quais (2), funções (2), das (2), modificar (2), disponíveis (2), principal (2), apontador (2), ultrapassa (2), longo (2), eixo (2), inline (2), block (2), mínimo (2), monocromático (2), proporção (2), máximo (2), algum (2), disponível (2), any (2), permite (2), passar (2), elementos (2), colors (2), intervalo (2), pelo (2), orientation (2), descrição (2), testam (2), design (2), responsivo (2), dia (2), elements (2), groups (2), styles (2), based (2), language (2), browser (2), see (2), effect (2), white (2), 800 (2), 768 (2), 767 (2), fundo (2), there (2), some (2), will (2), hide (2), mobile (2), initial (2), scale (2), user (2), name (2), elemento (2), muito (2), speech (2), print (2), navegadores (2), tem (2), corresponder (2), múltiplas (2), change (2), appearance (2), 600 (2), wide (2), between (2), blue (2), eee (2), 500 (2), 1c87c9 (2), ver (2), screens (2), gray (2), combinar (2), única (2), layout (2), celulares (2), usar (2), cada (2), verdadeira (2), condição (2), vez (2), apenas (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), rows (2), start (2), end (2), flow (2), feature (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, 2014, next, previous, yes, was, helpful, visualizar, determinar, paisagem, retrato, especiais, usuários, daltônicos, rapidez, update, scripts, estão, scripting, descreve, rolado, lida, nível, luz, ambiente, level, sistema, operacional, inverte, inverted, aproximado, suportado, agente, gamut, colorido, grade, bitmap, razão, específica, comuns, baseadas, lista, completa, abaixo, abrange, tudo, até, profundidade, também, aceitam, prefixos, rules, specifying, applying, particular, which, means, that, you, define, lightgreen, pink, lightblue, alterar, diferentes, hidden, large, devices, none, device, maximum, scalable, meta, ocultar, pequenos, leitores, tela, coloridas, computador, impressoras, este, padrão, desta, oculta, antigos, entendem, modernos, inofensivo, incluí, nega, inteira, funciona, aplicam, separada, 600px, 1200px, alguma, todas, devem, verdadeiras, encadear, different, sizes, set, grey, green, 599, smaller, than, 000, solid, 1000, ccc, 8ebf42, multiple, alterada, seguir, está, 800px, acima, 1000px, muda, redimensione, janela, resultado, changes, 411px, dark, 450px, 962px, 1366px, 333, 1366, 450, 962, cce5ff, 411, usando, interface, representa, usada, ler, regras, criadas, cssmediarule, sempre, quiser, espaçamento, visibilidade, mudem, empilhando, colunas, ocultando, barra, lateral, pequenas, removendo, imprimir, devo, isso, atual, avaliar, dentro, aplicados, parece, testa, estilizar, diretamente, nome, parênteses, sua, opcional, direciona, categoria, duas, partes, esta, aborda, interativos, redimensionar, aplica, avalia, somente, estreitas, celular, documento, impresso, ela, folha, adapta, desktops, laptops, tablets, entregar, site, separado, use, aprenda, essa, práticos, zoom, index, writing, widows, space, vertical, select, bidi, property, underline, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, quotes, events, place, orphans, order, opacity, rotate, distance, fit, mix, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, bleed, attachment, backface, play, state, iteration, self, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, link, lang, invalid, indeterminate, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, propriedades, css3, guia, flexbox, guides, gradientes, nomes, tabelas, links, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
regra css media w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom regra css media use a regra at rule media para aplicar estilos com base em media queries aprenda a usar essa propriedade com exemplos práticos a regra at rule media aplica um bloco de estilos apenas quando uma media query avalia como verdadeira por exemplo somente em telas mais estreitas que um celular ou apenas quando um documento é impresso ela é a base do design responsivo uma única folha de estilos que se adapta a desktops laptops tablets e celulares em vez de entregar um site separado para cada dispositivo esta página aborda a sintaxe do media os tipos de mídia e as características de mídia disponíveis como combinar condições com operadores lógicos e exemplos interativos que você pode redimensionar para ver o efeito como uma media query é construída uma media query tem duas partes um tipo de mídia opcional all print screen ou speech que direciona uma categoria de dispositivo uma ou mais características de mídia entre parênteses como min width 768px que testam uma condição como a width do viewport sua height orientação ou resolução se o tipo de mídia corresponder ao dispositivo atual e cada característica avaliar como verdadeira os estilos dentro do bloco são aplicados uma característica de mídia se parece com uma propriedade css nome valor mas testa uma condição em vez de estilizar um elemento diretamente quando devo usar isso sempre que quiser que o layout o espaçamento ou a visibilidade mudem com base no dispositivo empilhando colunas em celulares ocultando uma barra lateral em telas pequenas ou removendo cores de fundo ao imprimir uma página em javascript a interface cssmediarule representa uma única regra media e pode ser usada para ler ou modificar regras criadas com media sintaxe css media media media query styles copiar as media queries podem combinar múltiplas condições usando operadores lógicos and not only e vírgula exemplo da regra media css media code example doctype html html head title title of the document title style body background color 1c87c9 media screen and max width 411 px body background color cce5ff media screen and min width 768 px body background color eee media screen and max width 962 px and min width 450 px min width 1366 px body background color 333 style head body h2 media rule example h2 p resize the browser to see the effect p p the background color changes based on the viewport width light blue for screens up to 411px light gray for 768px and wider and dark gray for screens between 450px and 962px or 1366px and wider p body html copiar experimente você mesmo resultado no exemplo a seguir quando a largura do navegador está entre 500 e 800px ou acima de 1000px a aparência do div muda redimensione a janela do navegador para ver o efeito exemplo da regra media com aparência alterada de div css media multiple queries example doctype html html head title title of the document title style body background color 1c87c9 media screen and min width 200 px body background color 8ebf42 media screen and min width 600 px body background color ccc media screen and max width 800 px and min width 500 px min width 1000 px div box font size 50 px padding 50 px border 8 px solid 000 background eee style head body h2 media rule example h2 p media queries set the background color to grey if the viewport is 600 pixels wide or wider to green if the viewport is between 200 and 599 pixels wide if the viewport is smaller than 200 pixels the background color is blue p h3 change the appearance of div on different screen sizes h3 div class box div div body html copiar experimente você mesmo combinando condições com operadores lógicos as media queries podem encadear múltiplas condições and todas as condições devem ser verdadeiras media screen and min width 768px vírgula funciona como or os estilos se aplicam se alguma query separada por vírgula corresponder media max width 600px min width 1200px not nega uma query inteira media not all and monochrome only oculta a query de navegadores muito antigos que não entendem características de mídia não tem efeito em navegadores modernos mas é inofensivo incluí lo tipos de mídia valor descrição all este valor é usado para todos os dispositivos é o valor padrão desta propriedade print é usado para impressoras screen é usado para telas coloridas de computador speech é usado para leitores de tela exemplo de uso de media para ocultar um elemento em dispositivos muito pequenos css media rule doctype html html head meta name viewport content width device width initial scale 1 maximum scale 1 user scalable no style media max width 767 px hide mobile display none style head body h1 hi h1 p there is some text for example p p class hide mobile this text will be hidden on large devices p p there is some text for example p body html copiar experimente você mesmo exemplo de uso de media para alterar a cor de fundo do conteúdo em diferentes dispositivos css media rule doctype html html head title title of the document title style media screen and max width 767 px content background color lightblue padding 30 px media screen and min width 768 px content background color pink padding 10 px media screen and min width 800 px content background color lightgreen color white padding 50 px style head body div class content h2 resize the browser to see the effect h2 p css is a rule based language which means that you define rules specifying groups of styles applying to particular elements or groups of elements on the web page p div body html copiar experimente você mesmo características de mídia as características de mídia testam uma característica específica do dispositivo ou viewport as mais comuns no design responsivo do dia a dia são as baseadas em width min width e max width mas a lista completa abaixo abrange tudo desde a orientação do dispositivo até a profundidade de cor e o mecanismo de entrada características de intervalo width height aspect ratio color resolution monochrome também aceitam os prefixos min e max valor descrição width a largura do viewport height a altura do viewport orientation a orientação do viewport aspect ratio a razão entre o valor da característica de mídia width e o valor da característica de mídia height grid verifica se o dispositivo de saída é grade ou bitmap color o número de bits por componente de cor do dispositivo de saída se o dispositivo não for colorido o valor é 0 color gamut o intervalo aproximado de cores suportado pelo agente de usuário e pelo dispositivo de saída inverted colors verifica se o navegador ou o sistema operacional inverte as cores ou não hover verifica se o mecanismo de entrada principal permite ao usuário passar o cursor sobre elementos ou não any hover verifica se algum mecanismo de entrada disponível permite ao usuário passar o cursor sobre elementos ou não any pointer verifica se algum mecanismo de entrada disponível é um dispositivo apontador ou não light level o nível de luz do ambiente max aspect ratio a proporção máxima entre a largura e a altura da área de exibição max color o número máximo de bits por componente de cor para o dispositivo de saída max height a altura máxima da área de exibição max monochrome o número máximo de bits por cor em um dispositivo monocromático max resolution a resolução máxima do dispositivo max width a largura máxima da área de exibição min aspect ratio a proporção mínima entre a largura e a altura da área de exibição min color o número mínimo de bits por componente de cor para o dispositivo de saída min height a altura mínima da área de exibição min monochrome o número mínimo de bits por cor em um dispositivo monocromático min resolution a resolução mínima do dispositivo min width a largura mínima da área de exibição overflow block verifica como o dispositivo de saída lida com conteúdo que ultrapassa o viewport ao longo do eixo de bloco overflow inline verifica se o conteúdo que ultrapassa o viewport ao longo do eixo inline pode ser rolado ou não pointer verifica se o mecanismo de entrada principal é um dispositivo apontador ou não resolution descreve a resolução do dispositivo de saída scripting verifica se scripts estão disponíveis ou não update verifica com que rapidez o dispositivo de saída pode modificar a aparência do conteúdo prática prática quais são as funções das media queries em css quais são as funções das media queries em css podem ser usadas para verificar a altura e a largura do viewport podem ser usadas para verificar a largura e a altura do dispositivo podem ser usadas para aplicar estilos especiais para usuários daltônicos podem determinar a orientação do dispositivo paisagem ou retrato podem verificar a resolução do dispositivo podem verificar o tipo de navegador usado para visualizar a página verificar was this page helpful yes no previous max width next min height on this page como uma media query é construída sintaxe combinando condições com operadores lógicos tipos de mídia características de mídia prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores