{"id":444,"date":"2017-04-23T04:09:24","date_gmt":"2017-04-23T07:09:24","guid":{"rendered":"http:\/\/3.238.148.255\/?p=444"},"modified":"2025-04-19T02:34:38","modified_gmt":"2025-04-19T01:34:38","slug":"como-remover-e-adicionar-elementos-dependendo-da-resolucao-do-dispositivo","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/br\/tech\/como-remover-e-adicionar-elementos-dependendo-da-resolucao-do-dispositivo\/","title":{"rendered":"Como remover e adicionar elementos dependendo da resolu\u00e7\u00e3o do dispositivo?"},"content":{"rendered":"<p>A seu pedido, este artigo abordar\u00e1 <strong>Consultas de m\u00eddia<\/strong>, o que significa usar <strong>Tipos de m\u00eddia<\/strong> juntamente com uma ou mais express\u00f5es sobre as caracter\u00edsticas de uma m\u00eddia, a fim de definir a formata\u00e7\u00e3o para diferentes dispositivos. Navegadores ou aplicativos leem as express\u00f5es definidas na <strong>Consulta<\/strong>, e se o dispositivo em quest\u00e3o corresponder a essas condi\u00e7\u00f5es, o correspondente <strong>CSS<\/strong> \u00e9 aplicado.<\/p>\n<p>Os Tipos de M\u00eddia especificam a qual tipo de m\u00eddia um determinado bloco de CSS se destina. O HTML foi criado para ser port\u00e1til, ou seja, para ser lido e interpretado por qualquer tipo de dispositivo. No entanto, cada dispositivo renderiza o HTML de forma diferente devido a fatores como as dimens\u00f5es da tela (por exemplo, \u201c<strong>resolu\u00e7\u00e3o<\/strong>\u201d). Por exemplo, acessar um site de um desktop n\u00e3o se comportar\u00e1 da mesma forma que acess\u00e1-lo de um dispositivo m\u00f3vel, porque esses s\u00e3o dispositivos diferentes com <strong>contextos de navega\u00e7\u00e3o<\/strong>.<\/p><div id=\"juand-2146603306\" class=\"juand-content juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<p>O desafio com as Consultas de M\u00eddia hoje \u00e9 que cada vez mais dispositivos surgem com tamanhos de tela variados e recursos de hardware semelhantes aos de desktops, o que os leva a navegar quase como m\u00e1quinas de mesa. Veja o exemplo <strong><u>iPhone X<\/u><\/strong> por exemplo: sua qualidade de exibi\u00e7\u00e3o \u00e9 excelente e seu navegador renderiza p\u00e1ginas exatamente como um navegador de desktop t\u00edpico.<\/p>\n<p>Nesse caso, n\u00e3o h\u00e1 necessidade de preparar um layout e CSS especificamente para <strong>port\u00e1til<\/strong> tipos de m\u00eddia no iPhone \u2014 j\u00e1 que, embora seja um dispositivo port\u00e1til, ele n\u00e3o se comporta como um. No entanto, tamb\u00e9m n\u00e3o se comporta exatamente como um desktop. Embora o mecanismo de renderiza\u00e7\u00e3o do Safari seja id\u00eantico ao da vers\u00e3o para desktop, o comportamento e os padr\u00f5es de navega\u00e7\u00e3o do usu\u00e1rio ainda s\u00e3o diferentes. Acabamos em um meio-termo: n\u00e3o podemos fornecer um CSS completamente separado para dispositivos port\u00e1teis, nem podemos depender exclusivamente de um desktop (<strong>tela<\/strong>) folha de estilo.<\/p>\n<p>Veja abaixo como voc\u00ea definiria quais regras de folha de estilo devem ser carregadas:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media screen e (largura m\u00e1xima: 1024px) {<br \/>\n.pequena resolu\u00e7\u00e3o { display: none; }<br \/>\n}<br \/>\n.pequena resolu\u00e7\u00e3o { display: bloco; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>Opcionalmente, voc\u00ea pode criar um separado <strong>.css<\/strong> arquivar e hosped\u00e1-lo em seu pr\u00f3prio servidor ou por meio da solu\u00e7\u00e3o CDN da minha startup, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>. Em seguida, inclua-o na se\u00e7\u00e3o de metadados do seu HTML assim:<\/p><div id=\"juand-404996871\" class=\"juand-content_2 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<blockquote><p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;URL_OF_YOUR_CSS_FILE&#8221;&gt;<\/p><\/blockquote>\n<p>Depois que seu arquivo CSS estiver pronto, basta &quot;chamar&quot; a classe sempre que precisar do comportamento responsivo. Por exemplo, para aplic\u00e1-lo a uma imagem encapsulada em uma tag personalizada chamada &quot;C&quot;:<\/p>\n<blockquote><p>&lt;c class=&#8221;small-resolution&#8221;&gt;<br \/>\n&lt;img src=&quot;&rdquo;IMAGE_URL&rdquo;&quot; alt=&quot;&amp;quot;DESCRI&Ccedil;&Atilde;O&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>Espero que isso ajude! \ud83d\ude00<br \/>\nDeixe seus coment\u00e1rios abaixo e compartilhe com seus amigos!<\/p>","protected":false},"excerpt":{"rendered":"<p>A seu pedido, este artigo abordar\u00e1 Consultas de M\u00eddia, o que significa usar Tipos de M\u00eddia em conjunto com uma ou mais express\u00f5es sobre as caracter\u00edsticas de uma m\u00eddia para definir a formata\u00e7\u00e3o para diferentes dispositivos. Navegadores ou aplicativos leem as express\u00f5es definidas na Consulta e, se o dispositivo em quest\u00e3o atender a essas condi\u00e7\u00f5es, o CSS correspondente ser\u00e1 aplicado.<\/p>","protected":false},"author":1,"featured_media":97955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1302,1289],"tags":[],"class_list":["post-444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs","category-tech"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.juandesouza.com\/wp-content\/uploads\/2017\/11\/pexels-markusspiske-1089440-scaled.jpg?fit=2560%2C1707&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8STS8-7a","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/br\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}