{"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-eliminar-y-agregar-elementos-segun-la-resolucion-del-dispositivo","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/es\/tech\/como-eliminar-y-agregar-elementos-segun-la-resolucion-del-dispositivo\/","title":{"rendered":"\u00bfC\u00f3mo eliminar y agregar elementos dependiendo de la resoluci\u00f3n del dispositivo?"},"content":{"rendered":"<p>A petici\u00f3n suya, este art\u00edculo cubrir\u00e1 <strong>Consultas de medios<\/strong>, lo que significa usar <strong>Tipos de medios<\/strong> junto con una o m\u00e1s expresiones sobre las caracter\u00edsticas de un medio para definir el formato para diferentes dispositivos. Los navegadores o aplicaciones leen las expresiones definidas en el <strong>Consulta<\/strong>, y si el dispositivo en cuesti\u00f3n cumple dichas condiciones, se proceder\u00e1 al correspondiente <strong>CSS<\/strong> se aplica.<\/p>\n<p>Los tipos de medios especifican a qu\u00e9 tipo de medio est\u00e1 destinado un bloque de CSS. HTML se cre\u00f3 para ser port\u00e1til, es decir, para ser le\u00eddo e interpretado por cualquier tipo de dispositivo. Sin embargo, cada dispositivo procesa el HTML de forma diferente debido a factores como las dimensiones de la pantalla (es decir, &quot;<strong>resoluci\u00f3n<\/strong>\u201d). Por ejemplo, acceder a un sitio desde una computadora de escritorio no se comportar\u00e1 de la misma manera que acceder a \u00e9l desde un dispositivo m\u00f3vil, porque son dispositivos diferentes con diferentes <strong>contextos de navegaci\u00f3n<\/strong>.<\/p><div id=\"juand-364240965\" 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>El desaf\u00edo con las consultas de medios hoy en d\u00eda es que cada vez surgen m\u00e1s dispositivos con diferentes tama\u00f1os de pantalla y capacidades de hardware similares a las de las computadoras de escritorio, lo que los lleva a navegar casi como m\u00e1quinas de escritorio. <strong><u>iPhone X<\/u><\/strong> Por ejemplo: su calidad de visualizaci\u00f3n es excelente y su navegador representa las p\u00e1ginas exactamente como un navegador de escritorio t\u00edpico.<\/p>\n<p>En ese caso, no es necesario preparar un dise\u00f1o y CSS espec\u00edficamente para <strong>port\u00e1til<\/strong> Tipos de medios en el iPhone, ya que, aunque es un dispositivo port\u00e1til, no se comporta como tal. Tampoco se comporta exactamente como un ordenador de escritorio. Aunque el motor de renderizado de Safari es id\u00e9ntico al de la versi\u00f3n de escritorio, el comportamiento y los patrones de navegaci\u00f3n del usuario siguen siendo diferentes. Nos encontramos en un punto intermedio: no podemos proporcionar un CSS completamente independiente para dispositivos port\u00e1tiles, ni podemos depender \u00fanicamente de un ordenador de escritorio.<strong>pantalla<\/strong>) hoja de estilo.<\/p>\n<p>A continuaci\u00f3n se muestra c\u00f3mo definir\u00eda qu\u00e9 reglas de hoja de estilo se deben cargar:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media pantalla y (ancho m\u00e1ximo: 1024 px) {<br \/>\n.small-resolution { pantalla: ninguna; }<br \/>\n}<br \/>\n.small-resolution { pantalla: bloque; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>Opcionalmente, puede crear un archivo separado <strong>.css<\/strong> arch\u00edvelo y al\u00f3jelo en su propio servidor o a trav\u00e9s de la soluci\u00f3n CDN de mi startup, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>Luego, incl\u00fayelo en la secci\u00f3n de metadatos de tu HTML de la siguiente manera:<\/p><div id=\"juand-150482625\" 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>Una vez que el archivo CSS est\u00e9 listo, simplemente &quot;invoque&quot; la clase donde necesite el comportamiento responsivo. Por ejemplo, para aplicarlo a una imagen envuelta en una etiqueta personalizada llamada &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;DESCRIPCI&Oacute;N&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>\u00a1Espero que esto ayude! \ud83d\ude00<br \/>\n\u00a1Deja tus comentarios a continuaci\u00f3n y comp\u00e1rtelos con tus amigos!<\/p>","protected":false},"excerpt":{"rendered":"<p>Si lo solicita, este art\u00edculo abordar\u00e1 las consultas de medios, lo que implica el uso de tipos de medios junto con una o m\u00e1s expresiones sobre las caracter\u00edsticas de un medio para definir el formato para diferentes dispositivos. Los navegadores o aplicaciones leen las expresiones definidas en la consulta y, si el dispositivo en cuesti\u00f3n cumple dichas condiciones, se aplica el CSS correspondiente.<\/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\/es\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/es\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}