{"id":44166,"date":"2021-09-14T14:18:04","date_gmt":"2021-09-14T12:18:04","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2023-08-22T05:26:21","modified_gmt":"2023-08-22T08:26:21","slug":"media-query-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/","title":{"rendered":"Um Guia Detalhado para o Uso de Media Query no JavaScript"},"content":{"rendered":"<p>A maioria dos sites modernos usa t\u00e9cnicas de <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">web design responsivo<\/a> para garantir que eles tenham boa apar\u00eancia, sejam leg\u00edveis e permane\u00e7am utiliz\u00e1veis em dispositivos com qualquer tamanho de tela, ou seja, celulares, tablets, laptops, monitores de PC desktop, televisores, projetores e muito mais.<\/p>\n<p>Os sites que utilizam estas t\u00e9cnicas t\u00eam um \u00fanico modelo, que modifica o layout em resposta \u00e0s dimens\u00f5es da tela:<\/p>\n<ul>\n<li>Telas menores normalmente mostram uma vis\u00e3o linear, de uma coluna, onde controles de IU como <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">menus<\/a> s\u00e3o ativados clicando (hamb\u00farguer) nos \u00edcones.<\/li>\n<li>Telas maiores mostram mais informa\u00e7\u00f5es, talvez com barras laterais alinhadas horizontalmente. Controles de IU, como itens de menu, podem sempre estar vis\u00edveis para facilitar o acesso.<\/li>\n<\/ul>\n<p>Uma grande parte do web design responsivo \u00e9 a implementa\u00e7\u00e3o de uma media query <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> ou JavaScript para detectar o tamanho do dispositivo e servir automaticamente o design apropriado para esse tamanho. Vamos discutir porque essas consultas s\u00e3o importantes e como trabalhar com elas, mas primeiro, vamos discutir o design responsivo em geral.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Por que o design responsivo \u00e9 importante?<\/h2>\n<p>\u00c9 imposs\u00edvel fornecer um <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">layout de p\u00e1gina \u00fanica<\/a> e esperar que funcione em qualquer lugar.<\/p>\n<p>Quando os telefones celulares ganharam acesso rudimentar na web no in\u00edcio dos anos 2000, os propriet\u00e1rios de sites freq\u00fcentemente criavam dois ou tr\u00eas modelos de p\u00e1gina separados, baseados amplamente para tela dos telefones celulares e desktop. Isso se tornou cada vez mais impratic\u00e1vel \u00e0 medida que a variedade de dispositivos crescia exponencialmente.<\/p>\n<p>Hoje em dia, existem in\u00fameros tamanhos de telas, desde pequenas telas de rel\u00f3gio de pulso a enormes monitores de 8K e muito mais. Mesmo se considerarmos apenas os telefones celulares, os dispositivos recentes podem ter uma resolu\u00e7\u00e3o superior \u00e0 de muitos port\u00e1teis de gama baixa.<\/p>\n<p>O uso de dispositivos m\u00f3veis tamb\u00e9m <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\">cresceu al\u00e9m do uso de computadores desktop<\/a>. A menos que o seu site tenha um conjunto espec\u00edfico de usu\u00e1rios, voc\u00ea pode esperar que a maioria das pessoas o acesse a partir de um smartphone. Os dispositivos de tela pequena n\u00e3o s\u00e3o mais um pensamento posterior e devem ser considerados desde o in\u00edcio, apesar da maioria dos web designers, desenvolvedores e clientes continuarem a usar um PC padr\u00e3o.<\/p>\n<p>O Google reconheceu a import\u00e2ncia dos dispositivos m\u00f3veis. <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-mobile-first-index\/\">Os sites t\u00eam melhor classifica\u00e7\u00e3o na pesquisa do Google<\/a> quando s\u00e3o utiliz\u00e1veis e t\u00eam um bom desempenho em um smartphone. Um bom conte\u00fado permanece vital, mas um site de carregamento lento que n\u00e3o se adapta \u00e0s dimens\u00f5es da tela da sua base de usu\u00e1rios pode prejudicar o seu neg\u00f3cio.<\/p>\n<p>Finalmente, considere a acessibilidade. Um site que funcione para todos, n\u00e3o importa o dispositivo que estejam usando, alcan\u00e7ar\u00e1 um p\u00fablico maior. A acessibilidade \u00e9 um requisito legal em muitos pa\u00edses, mas mesmo que n\u00e3o seja onde voc\u00ea est\u00e1, considere que mais espectadores levar\u00e3o a mais convers\u00f5es e maior rentabilidade.<\/p>\n\n<h2>Como funciona o design responsivo?<\/h2>\n<p>A base do design responsivo \u00e9 o <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\">Media Query<\/a>: uma tecnologia CSS que pode aplicar estilos de acordo com m\u00e9tricas como o tipo de sa\u00edda (tela, impressora ou mesmo fala), dimens\u00f5es da tela, rela\u00e7\u00e3o de aspecto da tela, orienta\u00e7\u00e3o do dispositivo, profundidade de cor e precis\u00e3o do ponteiro. Media query tamb\u00e9m podem levar em conta as prefer\u00eancias do usu\u00e1rio, incluindo anima\u00e7\u00f5es reduzidas, modo claro\/escuro e maior contraste.<\/p>\n<p>Os exemplos que mostramos demonstram media query usando apenas a largura da tela, mas os sites podem ser consideravelmente mais flex\u00edveis. Consulte o <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">conjunto completo de op\u00e7\u00f5es no MDN<\/a> para obter detalhes.<\/p>\n<p>O <a href=\"https:\/\/caniuse.com\/css-mediaqueries\">suporte do media query \u00e9 excelente<\/a> e est\u00e1 em navegadores h\u00e1 mais de uma d\u00e9cada. Apenas o IE8 e abaixo n\u00e3o t\u00eam suporte. Eles ignoram estilos aplicados pelo media query, mas isso \u00e0s vezes pode ser um benef\u00edcio (leia mais na se\u00e7\u00e3o de <strong>Melhores Pr\u00e1ticas <\/strong>abaixo).<\/p>\n<p>H\u00e1 tr\u00eas maneiras padr\u00e3o de aplicar estilos usando o media query. A primeira carrega stylesheet espec\u00edficps em <a href=\"https:\/\/kinsta.com\/pt\/blog\/html-vs-html5\/\">c\u00f3digo HTML<\/a>. Por exemplo, a seguinte tag carrega o stylesheet <strong>wide.css <\/strong>quando um dispositivo tem uma tela com pelo menos 800 pixels de largura:<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 800px)\" href=\"wide.css\" \/&gt;<\/code><\/pre>\n<p>Em segundo lugar, as stylesheets podem ser condicionalmente carregadas em arquivos CSS usando uma at-rule <code>@import<\/code>:<\/p>\n<pre><code class=\"language-css\">\/* main.css *\/\n@import url('wide.css') screen and (min-width: 800px);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Note que <code>@import<\/code> deve ser evitado porque cada arquivo CSS importado bloqueia a renderiza\u00e7\u00e3o. As tags HTML <code>&lt;link&gt;<\/code> s\u00e3o baixados em paralelo, enquanto <code>@import<\/code> baixa os arquivos em s\u00e9rie.<\/p>\n<\/aside>\n\n<p>Mais tipicamente, voc\u00ea aplicar\u00e1 media query no stylesheet usando um bloco @media CSS at-rule block que modifica estilos espec\u00edficos. Por exemplo, o @media CSS:<\/p>\n<pre><code class=\"language-css\">\/* default styles *\/\nmain {\n  width: 400px;\n}\n\n\/* styles applied when screen has a width of at least 800px *\/\n@media screen and (min-width: 800px) {\n  main {\n    width: 760px;\n  }\n}<\/code><\/pre>\n<p>Os desenvolvedores podem aplicar quaisquer regras de media queries\u00a0 que sejam necess\u00e1rias para adaptar o layout de um site.<\/p>\n<h2>Melhores pr\u00e1ticas de media query<\/h2>\n<p>Quando media query for concebida pela primeira vez, muitos sites optaram por um conjunto de layouts rigidamente fixados. Isso \u00e9 conceitualmente mais f\u00e1cil de projetar e codificar porque efetivamente replica um conjunto limitado de modelos de p\u00e1gina. Por exemplo:<\/p>\n<ol>\n<li>Larguras de tela inferiores a 600px utilizam um layout para celulares de 400px de largura.<\/li>\n<li>Larguras de tela entre 600px e 999px usam um layout para tablet de 600px de largura.<\/li>\n<li>Larguras de tela superiores a 1.000px usam um layout para desktop de 1000px de largura.<\/li>\n<\/ol>\n<p>A t\u00e9cnica \u00e9 imperfeita. Os resultados em telas muito pequenas e muito grandes podem parecer maus, e a manuten\u00e7\u00e3o do CSS pode ser necess\u00e1ria \u00e0 medida que os dispositivos e os tamanhos das telas mudam com o tempo.<\/p>\n<p>Uma op\u00e7\u00e3o melhor \u00e9 usar um design <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-mobile-first-index\/\">mobile-first<\/a> fluido com pontos de ruptura que adaptem o layout em determinados tamanhos. Em ess\u00eancia, o layout padr\u00e3o utiliza os estilos mais simples de telas pequenas que posicionam os elementos em blocos verticais lineares.<\/p>\n<p>Por exemplo, <code>&lt;article&gt;<\/code> e <code>&lt;aside&gt;<\/code> dentro de um cont\u00eainer <code>&lt;main&gt;<\/code>:<\/p>\n<pre><code class=\"language-css\">\/* default small-screen device *\/\nmain {\n  width: 100%;\n}\n\narticle, aside {\n  width: 100%;\n  padding: 2em;\n}<\/code><\/pre>\n<p>Aqui est\u00e1 o resultado em todos os navegadores &#8211; mesmo os antigos que n\u00e3o suportam media query:<\/p>\n<figure id=\"attachment_102292\" aria-describedby=\"caption-attachment-102292\" style=\"width: 626px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-102292 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\" alt=\"Exemplo de captura de tela sem suporte a consultas de m\u00eddia.\" width=\"626\" height=\"200\"><\/a><figcaption id=\"caption-attachment-102292\" class=\"wp-caption-text\">Exemplo de captura de tela sem suporte do media query .<\/figcaption><\/figure>\n<p>Quando media queries s\u00e3o suportadas e a tela excede uma largura espec\u00edfica, digamos 500px, os elementos <code>&lt;article&gt;<\/code> e <code>&lt;aside&gt;<\/code> podem ser posicionados horizontalmente. Este exemplo usa uma <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\">grade CSS<\/a>, onde o conte\u00fado prim\u00e1rio usa aproximadamente dois ter\u00e7os da largura, e o conte\u00fado secund\u00e1rio usa o restante um ter\u00e7o:<\/p>\n<pre><code class=\"language-css\">\/* larger device *\/\n@media (min-width: 500px) {\n  main {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 2em;\n  }\n\n  article, aside {\n    width: auto;\n    padding: 0;\n  }\n}<\/code><\/pre>\n<p>Aqui est\u00e1 o resultado em tela maiores:<\/p>\n<figure id=\"attachment_102260\" aria-describedby=\"caption-attachment-102260\" style=\"width: 602px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-102260 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\" alt=\"Exemplo de screenshot com suporte de consulta de m\u00eddia\" width=\"602\" height=\"112\"><\/a><figcaption id=\"caption-attachment-102260\" class=\"wp-caption-text\">Exemplo de screenshot com suporte media query.<\/figcaption><\/figure>\n<h2>Alternativas de media query<\/h2>\n<p>Projetos responsivos tamb\u00e9m podem ser implementados em CSS modernos utilizando novas propriedades que adaptam intrinsecamente o layout sem examinar as dimens\u00f5es da janela de exibi\u00e7\u00e3o. As op\u00e7\u00f5es incluem:<\/p>\n<ul>\n<li><code>calc<\/code>, <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code>, <code>max-height<\/code>, e a propriedade mais recente de <code>clamp<\/code> podem definir as dimens\u00f5es dos elementos de acordo com os limites conhecidos e o espa\u00e7o dispon\u00edvel.<\/li>\n<li>As unidades da janela de exibi\u00e7\u00e3o <code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code>, e <code>vmax<\/code> podem dimensionar os elementos de acordo com as fra\u00e7\u00f5es de dimens\u00e3o da tela.<\/li>\n<li>O texto pode ser mostrado em colunas CSS que aparecem ou desaparecem conforme o espa\u00e7o permitido.<\/li>\n<li>Os elementos podem ser dimensionados de acordo com os tamanhos do seu elemento filho, utilizando as dimens\u00f5es <code>min-content<\/code>, <code>fit-content<\/code>, e <code>max-content<\/code>.<\/li>\n<li>CSS flexbox pode embrulhar &#8211; ou <em>n\u00e3o <\/em>embrulhar &#8211; elementos \u00e0 medida que estes come\u00e7am a exceder o espa\u00e7o dispon\u00edvel.<\/li>\n<li>Os elementos da grade CSS podem ser dimensionados com unidades <code>fr<\/code> fra\u00e7\u00e3o proporcional. A fun\u00e7\u00e3o de repeti\u00e7\u00e3o do VCC pode ser usada em conjunto com <code>minmax<\/code>, <code>auto-fit<\/code>, e <code>auto-fill<\/code> para alocar o espa\u00e7o dispon\u00edvel.<\/li>\n<li>As novas e (atualmente) experimentais <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\">consultas de cont\u00eaineres CSS<\/a> podem reagir ao espa\u00e7o parcial dispon\u00edvel para um componente dentro de um layout.<\/li>\n<\/ul>\n<p>Essas op\u00e7\u00f5es est\u00e3o al\u00e9m do escopo deste artigo, mas muitas vezes s\u00e3o mais pr\u00e1ticas do que media query mais brutas, que s\u00f3 podem responder \u00e0s dimens\u00f5es da tela. Se voc\u00ea conseguir um layout sem media query , ele provavelmente usar\u00e1 menos c\u00f3digo, ser\u00e1 mais eficiente e exigir\u00e1 menos manuten\u00e7\u00e3o ao longo do tempo.<\/p>\n<p>Dito isto, h\u00e1 situa\u00e7\u00f5es em que a media query continua sendo a \u00fanica op\u00e7\u00e3o de layout vi\u00e1vel. Elas permanecem essenciais quando voc\u00ea precisa considerar outros fatores de tela, como rela\u00e7\u00f5es de aspecto, orienta\u00e7\u00e3o do dispositivo, profundidade de cor, precis\u00e3o do ponteiro ou prefer\u00eancias do usu\u00e1rio, como anima\u00e7\u00f5es reduzidas e modo claro\/escuro.<\/p>\n<h2>Voc\u00ea precisa de media query no JavaScript?<\/h2>\n<p>At\u00e9 agora, temos falado sobretudo do CSS. Isso porque a maioria dos problemas de layout podem &#8211; e <em>devem <\/em>&#8211; ser resolvidos apenas no CSS.<\/p>\n<p>Entretanto, h\u00e1 situa\u00e7\u00f5es em que \u00e9 pr\u00e1tico usar uma media query no JavaScript em vez de CSS, como por exemplo, quando:<\/p>\n<ul>\n<li>Um componente, tal como um menu, tem diferentes funcionalidades em telas pequenas e grandes.<\/li>\n<li>Mude de e para retrato\/paisagem afeta a funcionalidade de um aplicativo web.<\/li>\n<li>Um jogo baseado no toque tem de alterar <code>&lt;canvas&gt;<\/code> layout ou adaptar os bot\u00f5es de controle.<\/li>\n<li>Um aplicativo web adere as prefer\u00eancias do usu\u00e1rio, como modo escuro\/claro, anima\u00e7\u00e3o reduzida, rudeza de toque, etc.<\/li>\n<\/ul>\n<p>As se\u00e7\u00f5es seguintes demonstram tr\u00eas m\u00e9todos que utilizam media query &#8211; ou op\u00e7\u00f5es similares &#8211; em <a href=\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\">JavaScript<\/a>. Todos os exemplos retornam uma seq\u00fc\u00eancia de estados onde:<\/p>\n<ul>\n<li>vista <strong>small (pequeno) <\/strong>= uma tela com uma largura inferior a 400 pixels;<\/li>\n<li>vista <strong>medium (m\u00e9dia) <\/strong>= uma tela com uma largura entre 400 e 799 pixels; e<\/li>\n<li>vista <strong>large (grande) <\/strong>= um tela com uma largura de 800 pixels ou mais.<\/li>\n<\/ul>\n<h2>Op\u00e7\u00e3o 1: Monitore o tamanho da janela de exibi\u00e7\u00e3o<\/h2>\n<p>Esta foi a \u00fanica op\u00e7\u00e3o nos dias sombrios que antecederam a implementa\u00e7\u00e3o do media query. O JavaScript escutava os eventos de &#8220;redimensionamento&#8221; do navegador, analisava as dimens\u00f5es da janela de exibi\u00e7\u00e3o usando <code>window.innerWidth<\/code> e\u00a0<code>window.innerHeight<\/code> (ou <code>document.body.clientWidth<\/code> e\u00a0<code>document.body.clientHeight<\/code> em IEs antigos), e reage em conformidade.<\/p>\n<p>Este c\u00f3digo envia a string <strong>small<\/strong>, <b>medium <\/b>ou <strong>grande<\/strong> calculada para a console:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small: 0,\n    medium: 400,\n    large: 800\n  };\n\n\/\/ observe window resize\nwindow.addEventListener('resize', resizeHandler);\n\n\/\/ initial call\nresizeHandler();\n\n\/\/ calculate size\nfunction resizeHandler() {\n\n  \/\/ get window width\n  const iw = window.innerWidth;\n \n  \/\/ determine named size\n  let size = null;\n  for (let s in screen) {\n    if (iw &gt;= screen[s]) size = s;\n  }\n\n  console.log(size);\n}<\/code><\/pre>\n<p>Voc\u00ea pode ver uma <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\">demonstra\u00e7\u00e3o do trabalho aqui<\/a>. (Se estiver usando um navegador desktop, abra este link em uma nova janela para tornar o redimensionamento mais f\u00e1cil. Os utilizadores de dispositivos m\u00f3veis podem girar o dispositivo).<\/p>\n<p>O exemplo acima examina o tamanho da janela de exibi\u00e7\u00e3o a medida que o navegador \u00e9 redimensionado; determina se \u00e9 pequeno, m\u00e9dio ou grande; e define isso como uma classe no elemento do corpo, o que muda a cor de fundo.<\/p>\n<p>As vantagens deste m\u00e9todo incluem:<\/p>\n<ul>\n<li>Funciona em qualquer <a href=\"https:\/\/kinsta.com\/pt\/participacao-mercado-navegadores-desktop\/\">navegador<\/a> que possa executar JavaScript &#8211; mesmo em aplicativos antigos.<\/li>\n<li>Voc\u00ea est\u00e1 capturando as dimens\u00f5es exatas e pode reagir de acordo.<\/li>\n<\/ul>\n<p>As desvantagens:<\/p>\n<ul>\n<li>\u00c9 uma t\u00e9cnica antiga que requer um c\u00f3digo consider\u00e1vel.<\/li>\n<li>\u00c9 demasiado exato? Voc\u00ea realmente precisa saber quando a largura \u00e9 966px vs 967px?<\/li>\n<li>Pode ser necess\u00e1rio fazer a correspond\u00eancia manual das dimens\u00f5es com uma media query CSS correspondente.<\/li>\n<li>Os usu\u00e1rios podem redimensionar o navegador rapidamente, fazendo com que a fun\u00e7\u00e3o de manipulador seja executada novamente a cada vez. Isto pode sobrecarregar navegadores mais antigos e lentos, acelerando o evento. Ele s\u00f3 pode ser acionado uma vez a cada 500 milissegundos.<\/li>\n<\/ul>\n<p>Em resumo, n\u00e3o monitorize as dimens\u00f5es da janela de exibi\u00e7\u00e3o, a menos que tenha requisitos de dimensionamento muito espec\u00edficos e complexos.<\/p>\n<h2 id=\"option2\">Op\u00e7\u00e3o 2: Defina e monitore uma propriedade CSS personalizada (vari\u00e1vel)<\/h2>\n<p>Esta \u00e9 uma t\u00e9cnica ligeiramente incomum que altera o valor de uma string de propriedades personalizada no CSS quando uma media query \u00e9 acionada. As propriedades personalizadas s\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/navegadores-mais-seguros\/\">suportadas em todos os navegadores modernos<\/a> (mas n\u00e3o no IE).<\/p>\n<p>No exemplo abaixo, a <code>--screen custom property<\/code> \u00a0\u00e9 definida como &#8220;small&#8221;, &#8220;medium&#8221;, ou &#8220;large&#8221; dentro de um bloco de c\u00f3digo @media:<\/p>\n<pre><code class=\"language-css\">body {\n  --screen: \"small\";\n  background-color: #cff;\n  text-align: center;\n}\n\n@media (min-width: 400px) {\n \n  body {\n    --screen: \"medium\";\n    background-color: #fcf;\n  }\n \n}\n\n@media (min-width: 800px) {\n \n  body {\n    --screen: \"large\";\n    background-color: #ffc;\n  }\n \n}<\/code><\/pre>\n<p>O valor pode ser emitido apenas em CSS usando um pseudo-elemento (mas note que ele deve ser contido dentro de aspas simples ou duplas):<\/p>\n<pre><code class=\"language-css\">p::before {\n  content: var(--screen);\n}<\/code><\/pre>\n<p>Voc\u00ea pode obter o valor da propriedade personalizada usando o JavaScript:<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Esta n\u00e3o \u00e9 bem a hist\u00f3ria toda, no entanto, porque o valor retornado cont\u00e9m todos os espa\u00e7os em branco e personagens de cita\u00e7\u00e3o definidos ap\u00f3s os dois pontos no CSS. A string ser\u00e1 &#8221;large&#8221;, por isso \u00e9 necess\u00e1rio um pouco de arruma\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-js\">\/\/ returns small, medium, or large in a string\nconst screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen')\n                 .replace(\/\\W\/g, '');<\/code><\/pre>\n<p>Voc\u00ea pode ver uma <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\">demonstra\u00e7\u00e3o do trabalho aqui<\/a>. (Se estiver usando um navegador desktop, abra este link em uma nova janela para tornar o redimensionamento mais f\u00e1cil. Os utilizadores de dispositivos m\u00f3veis podem girar o dispositivo).<\/p>\n<p>O exemplo examina o valor do CSS a cada dois segundos. Ele requer um pequeno c\u00f3digo JavaScript, mas \u00e9 necess\u00e1rio pesquisar por altera\u00e7\u00f5es &#8211; voc\u00ea n\u00e3o pode detectar automaticamente que o valor da propriedade personalizada foi alterado usando CSS.<\/p>\n<p>Tamb\u00e9m n\u00e3o \u00e9 poss\u00edvel escrever o valor em um pseudo-elemento e detectar a mudan\u00e7a usando um <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\">DOM Mutation Observer<\/a>. Pseudo-elementos n\u00e3o s\u00e3o uma parte &#8220;real&#8221; do DOM!<\/p>\n<p>As vantagens:<\/p>\n<ul>\n<li>\u00c9 uma t\u00e9cnica simples que usa principalmente CSS e combina com consultas reais de m\u00eddia.<\/li>\n<li>Quaisquer outras propriedades do CSS podem ser modificadas ao mesmo tempo.<\/li>\n<li>N\u00e3o h\u00e1 necessidade de duplicar ou analisar as sequ\u00eancias de media query JavaScript.<\/li>\n<\/ul>\n<p>A principal desvantagem \u00e9 que voc\u00ea n\u00e3o pode reagir automaticamente a uma mudan\u00e7a na dimens\u00e3o do porto de vis\u00e3o do navegador. Se o usu\u00e1rio girar seu telefone de retrato para orienta\u00e7\u00e3o de paisagem, o JavaScript nunca saberia. Voc\u00ea pode frequentemente sondar por mudan\u00e7as, mas isso \u00e9 ineficiente e resulta no intervalo de tempo que voc\u00ea v\u00ea em nossa demonstra\u00e7\u00e3o.<\/p>\n<p>A monitoriza\u00e7\u00e3o das propriedades personalizadas do CSS \u00e9 uma t\u00e9cnica nova, mas s\u00f3 \u00e9 pr\u00e1tica quando:<\/p>\n<ol>\n<li>O layout pode ser fixado no ponto em que uma p\u00e1gina \u00e9 inicialmente renderizada. Um quiosque ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/stripe-vs-square\/\">terminal de ponto de venda<\/a> \u00e9 uma possibilidade, mas \u00e9 prov\u00e1vel que estes tenham resolu\u00e7\u00f5es fixas e um \u00fanico layout, por isso o media query JavaScript tornam-se irrelevantes.<\/li>\n<li>O site ou aplicativo j\u00e1 executa fun\u00e7\u00f5es baseadas no tempo, tais como uma anima\u00e7\u00e3o de jogo. A propriedade personalizada pode ser verificada ao mesmo tempo para determinar se s\u00e3o necess\u00e1rias altera\u00e7\u00f5es de layout.<\/li>\n<\/ol>\n<h2>Op\u00e7\u00e3o 3: Utilize a API matchMedia<\/h2>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">API matchMedia<\/a> \u00e9 um pouco incomum, mas permite que voc\u00ea implemente uma media query JavaScript. \u00c9 <a href=\"https:\/\/caniuse.com\/matchmedia\">suportada na maioria dos navegadores<\/a> a partir do IE10. O construtor retorna um <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\">objeto MediaQueryList<\/a> que tem uma propriedade de correspond\u00eancia que avalia como true ou false para sua media query espec\u00edfica.<\/p>\n<p>O seguinte c\u00f3digo \u00e9 true quando a largura da porta de visualiza\u00e7\u00e3o do navegador \u00e9 de 800px ou superior:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>Um evento de &#8220;mudan\u00e7a&#8221; pode ser aplicado ao objeto MediaQueryList. Isto \u00e9 acionado toda vez que o estado da propriedade de partida muda: Torna-se verdade (mais de 800px) depois de anteriormente ser falso (menos de 800px) ou vice-versa.<\/p>\n<p>A fun\u00e7\u00e3o do manipulador receptor \u00e9 passada para o objeto MediaQueryList como o primeiro par\u00e2metro:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nmqLarge.addEventListener('change', mqHandler);\n\n\/\/ media query handler function\nfunction mqHandler(e) {\n \n  console.log(\n    e.matches ? 'large' : 'not large'\n  );\n \n}<\/code><\/pre>\n<p>O manipulador s\u00f3 funciona quando a propriedade do jogo muda. Ele n\u00e3o ser\u00e1 executado quando a p\u00e1gina for carregada inicialmente, ent\u00e3o voc\u00ea pode chamar a fun\u00e7\u00e3o diretamente para determinar o estado inicial:<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-http-api-parte-2\/\">API<\/a> funciona bem quando voc\u00ea est\u00e1 se movendo entre dois estados distintos. Para analisar tr\u00eas ou mais estados, tais como <strong>small<\/strong>, <strong>medium <\/strong>e <strong>large<\/strong>, ser\u00e1 necess\u00e1rio mais c\u00f3digo.<\/p>\n<p>Comece definindo um objeto de estado de tela com objetos MatchMedia associados:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small : null,\n    medium: window.matchMedia( '(min-width: 400px)' ),\n    large : window.matchMedia( '(min-width: 800px)' )\n  };<\/code><\/pre>\n<p>N\u00e3o \u00e9 necess\u00e1rio definir um objeto MatchMedia no estado <strong>small <\/strong>porque o manipulador de eventos medium acionar\u00e1 quando se mover entre o <strong>small <\/strong>e o <strong>medium<\/strong>.<\/p>\n<p>Os ouvintes dos eventos podem ent\u00e3o ser definidos para os eventos de <strong>medium <\/strong>e <strong>large <\/strong>porte. Estes chamam a mesma fun\u00e7\u00e3o mqHandler() handler:<\/p>\n<pre><code class=\"language-js\">\/\/ media query change events\nfor (let [scr, mq] of Object.entries(screen)) {\n  if (mq) mq.addEventListener('change', mqHandler);\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o de manuseamento deve verificar todos os objetos MediaQueryList para determinar se o <strong>small<\/strong>, <strong>medium <\/strong>ou <strong>large<\/strong> est\u00e1 atualmente ativo. Os jogos devem ser executados por ordem de tamanho, uma vez que uma largura de 999px corresponderia tanto ao <strong>medium <\/strong>como ao <strong>large <\/strong>&#8211; apenas o maior deve &#8220;ganhar&#8221;:<\/p>\n<pre><code class=\"language-js\">\/\/ media query handler function\nfunction mqHandler() {\n \n  let size = null;\n  for (let [scr, mq] of Object.entries(screen)) {\n    if (!mq || mq.matches) size = scr;\n  }\n \n  console.log(size);\n \n}<\/code><\/pre>\n<p>Voc\u00ea pode ver uma <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\">demonstra\u00e7\u00e3o do trabalho aqui<\/a>. (Se estiver usando um navegador desktop, abra este link em uma nova janela para tornar o redimensionamento mais f\u00e1cil. Os utilizadores de dispositivos m\u00f3veis podem girar o dispositivo).<\/p>\n<p>Os usos do exemplo s\u00e3o:<\/p>\n<ol>\n<li>Media query no CSS para definir e exibir uma propriedade personalizada (como mostrado na <strong>op\u00e7\u00e3o 2 <\/strong>acima).<\/li>\n<li>Media query id\u00eanticas em bjetos MatchMedia para monitorar mudan\u00e7as de dimens\u00e3o em JavaScript. A sa\u00edda em JavaScript ir\u00e1 mudar exatamente ao mesmo tempo.<\/li>\n<\/ol>\n<p>As principais vantagens de utilizar a API matchMedia s\u00e3o:<\/p>\n<ul>\n<li>\u00c9 orientado por eventos e eficiente no processamento de mudan\u00e7as de m\u00eddia.<\/li>\n<li>Utiliza strings de media query id\u00eanticas \u00e0s do CSS.<\/li>\n<\/ul>\n<p>As desvantagens:<\/p>\n<ul>\n<li>Lidar com duas ou mais media queries requer mais reflex\u00e3o e l\u00f3gica de c\u00f3digo.<\/li>\n<li>Voc\u00ea provavelmente precisar\u00e1 duplicar as sequ\u00eancias de media query tanto em c\u00f3digo CSS quanto em JavaScript. Isto pode levar a erros se voc\u00ea n\u00e3o os mantiver em sincronia.<\/li>\n<\/ul>\n<p>Para evitar desencontros do media query , voc\u00ea poderia considerar o uso de tokens de design em seu sistema de constru\u00e7\u00e3o. As strings do media query s\u00e3o definidas em um arquivo JSON (ou similar) e os valores s\u00e3o inseridos no c\u00f3digo CSS e JavaScript no momento da compila\u00e7\u00e3o.<\/p>\n<p>Em resumo, a matchMedia API \u00e9 provavelmente a forma mais eficiente e pr\u00e1tica de implementar uma media query JavaScript. Ela tem algumas peculiaridades, mas \u00e9 a melhor op\u00e7\u00e3o na maioria das situa\u00e7\u00f5es.<\/p>\n\n<h2>Resumo<\/h2>\n<p>As op\u00e7\u00f5es de dimensionamento Intr\u00ednseco do CSS s\u00e3o cada vez mais vi\u00e1veis, mas media query continuam sendo a base do <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">web design responsivo<\/a> para a maioria dos sites. Elas ser\u00e3o sempre necess\u00e1rias para lidar com layouts mais complexos e prefer\u00eancias do usu\u00e1rio, como o modo claro\/escuro.<\/p>\n<p>Tente, sempre que poss\u00edvel, manter as perguntas da m\u00eddia apenas para o CSS. Quando voc\u00ea n\u00e3o tem escolha a n\u00e3o ser se aventurar no dom\u00ednio do JavaScript, a API matchMedia fornece controle adicional para componentes de media query JavaScript, que requerem funcionalidade adicional baseada em dimens\u00f5es.<\/p>\n<p>Voc\u00ea tem alguma outra dica para implementar uma media query JavaScript? Compartilhe-as na se\u00e7\u00e3o de coment\u00e1rios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A maioria dos sites modernos usa t\u00e9cnicas de web design responsivo para garantir que eles tenham boa apar\u00eancia, sejam leg\u00edveis e permane\u00e7am utiliz\u00e1veis em dispositivos com &#8230;<\/p>\n","protected":false},"author":188,"featured_media":44172,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[523,460],"topic":[1011,978],"class_list":["post-44166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-frameworks","topic-experiencia-usuario","topic-tutoriais-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Um Guia Detalhado para o Uso de Media Query no JavaScript<\/title>\n<meta name=\"description\" content=\"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Um Guia Detalhado para o Uso de Media Query no JavaScript\" \/>\n<meta property=\"og:description\" content=\"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-14T12:18:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T08:26:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Um Guia Detalhado para o Uso de Media Query no JavaScript\",\"datePublished\":\"2021-09-14T12:18:04+00:00\",\"dateModified\":\"2023-08-22T08:26:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\"},\"wordCount\":3134,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Frameworks\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\",\"name\":\"Um Guia Detalhado para o Uso de Media Query no JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-14T12:18:04+00:00\",\"dateModified\":\"2023-08-22T08:26:21+00:00\",\"description\":\"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Um guia detalhado para o uso de consultas de m\u00eddia em JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Experi\u00eancia do Usu\u00e1rio\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/experiencia-usuario\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Um Guia Detalhado para o Uso de Media Query no JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Um Guia Detalhado para o Uso de Media Query no JavaScript","description":"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/","og_locale":"pt_PT","og_type":"article","og_title":"Um Guia Detalhado para o Uso de Media Query no JavaScript","og_description":"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.","og_url":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-09-14T12:18:04+00:00","article_modified_time":"2023-08-22T08:26:21+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Craig Buckler","Tempo estimado de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Um Guia Detalhado para o Uso de Media Query no JavaScript","datePublished":"2021-09-14T12:18:04+00:00","dateModified":"2023-08-22T08:26:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/"},"wordCount":3134,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Frameworks"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/","url":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/","name":"Um Guia Detalhado para o Uso de Media Query no JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-14T12:18:04+00:00","dateModified":"2023-08-22T08:26:21+00:00","description":"Media queries s\u00e3o normalmente definidas no CSS para tornar o layout de um site responsivo. Elas tamb\u00e9m podem ser usadas em JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Um guia detalhado para o uso de consultas de m\u00eddia em JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Experi\u00eancia do Usu\u00e1rio","item":"https:\/\/kinsta.com\/pt\/topicos\/experiencia-usuario\/"},{"@type":"ListItem","position":3,"name":"Um Guia Detalhado para o Uso de Media Query no JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/44166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=44166"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/44166\/revisions"}],"predecessor-version":[{"id":44380,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/44166\/revisions\/44380"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/translations\/nl"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/44166\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/44172"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=44166"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=44166"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=44166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}