{"id":43864,"date":"2021-09-14T13:24:36","date_gmt":"2021-09-14T11:24:36","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2025-02-07T15:13:46","modified_gmt":"2025-02-07T14:13:46","slug":"media-queries-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/","title":{"rendered":"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript"},"content":{"rendered":"<p>La mayor\u00eda de los sitios web modernos utilizan t\u00e9cnicas de <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">dise\u00f1o web responsivo<\/a>\u00a0para garantizar que se vean bien, sean legibles y sigan siendo utilizables en dispositivos con cualquier tama\u00f1o de pantalla, es decir, tel\u00e9fonos m\u00f3viles, tabletas, ordenadores port\u00e1tiles, monitores de PC de escritorio, televisores, proyectores, etc.<\/p>\n<p>Los sitios que utilizan estas t\u00e9cnicas tienen una \u00fanica plantilla, que modifica el dise\u00f1o en funci\u00f3n de las dimensiones de la pantalla:<\/p>\n<ul>\n<li>Las pantallas m\u00e1s peque\u00f1as suelen mostrar una vista lineal de una sola columna en la que los controles de la interfaz de usuario, como los <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/\">men\u00fas,<\/a> se activan haciendo clic en los iconos (hamburguesa).<\/li>\n<li>Las pantallas m\u00e1s grandes muestran m\u00e1s informaci\u00f3n, quiz\u00e1s con barras laterales alineadas horizontalmente. Los controles de la interfaz de usuario, como los elementos del men\u00fa, pueden estar siempre visibles para facilitar el acceso.<\/li>\n<\/ul>\n<p>Una gran parte del dise\u00f1o web responsivo es la implementaci\u00f3n de una Media Queries (consulta de medios) <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS<\/a> o JavaScript para detectar el tama\u00f1o del dispositivo y servir autom\u00e1ticamente el dise\u00f1o apropiado para ese tama\u00f1o. Vamos a discutir por qu\u00e9 estas consultas son importantes y c\u00f3mo trabajar con ellas, pero primero, vamos a discutir el dise\u00f1o responsivo en general.<\/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>\u00bfPor qu\u00e9 es importante el dise\u00f1o web responsivo?<\/h2>\n<p>Es imposible ofrecer un <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">\u00fanico dise\u00f1o de p\u00e1gina<\/a> y esperar que funcione en todas partes.<\/p>\n<p>Cuando los tel\u00e9fonos m\u00f3viles obtuvieron por primera vez un acceso rudimentario a la web, a principios de la d\u00e9cada de 2000, los propietarios de sitios web sol\u00edan crear dos o tres plantillas de p\u00e1gina separadas, basadas vagamente en las vistas de m\u00f3vil y de escritorio. Esto se volvi\u00f3 cada vez m\u00e1s impracticable a medida que la variedad de dispositivos crec\u00eda exponencialmente.<\/p>\n<p>Hoy en d\u00eda, existen numerosos tama\u00f1os de pantalla que van desde las diminutas pantallas de los relojes de pulsera hasta los enormes monitores de 8 K y muchos m\u00e1s. Incluso si solo se tienen en cuenta los tel\u00e9fonos m\u00f3viles, los dispositivos m\u00e1s recientes pueden tener una resoluci\u00f3n superior a la de muchos ordenadores port\u00e1tiles de gama baja.<\/p>\n<p>El uso de los m\u00f3viles tambi\u00e9n ha <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\">crecido m\u00e1s que el de los ordenadores de sobremesa<\/a>. A menos que tu sitio tenga un conjunto espec\u00edfico de usuarios, puede esperar que la mayor\u00eda de la gente acceda a \u00e9l desde un smartphone. Los dispositivos de pantalla peque\u00f1a han dejado de ser una ocurrencia tard\u00eda y deben tenerse en cuenta desde el principio, a pesar de que la mayor\u00eda de los dise\u00f1adores web, desarrolladores y clientes siguen utilizando un PC est\u00e1ndar.<\/p>\n<p>Google ha reconocido la importancia de los dispositivos m\u00f3viles. <a href=\"https:\/\/kinsta.com\/es\/blog\/google-indexacion-centrada-moviles\/\">Los sitios se clasifican mejor en la b\u00fasqueda de Google<\/a> cuando son utilizables y tienen un buen rendimiento en un smartphone. Un buen contenido sigue siendo vital, pero un sitio que cargue con lentitud y no se adapte a las dimensiones de la pantalla de sus usuarios podr\u00eda perjudicar a tu negocio.<\/p>\n<p>Por \u00faltimo, ten en cuenta la accesibilidad. Un sitio que funciona para todos, independientemente del dispositivo que utilicen, llegar\u00e1 a un p\u00fablico m\u00e1s amplio. La accesibilidad es un requisito legal en muchos pa\u00edses, pero incluso si no lo es donde te encuentras, ten en cuenta que un mayor n\u00famero de espectadores se traducir\u00e1 en m\u00e1s conversiones y mayor rentabilidad.<\/p>\n\n<h2>\u00bfC\u00f3mo funciona el dise\u00f1o responsivo?<\/h2>\n<p>La base del dise\u00f1o responsivo son <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\">las consultas de medios<\/a>: una tecnolog\u00eda CSS que puede aplicar estilos en funci\u00f3n de m\u00e9tricas como el tipo de salida (pantalla, impresora o incluso voz), las dimensiones de la pantalla, la relaci\u00f3n de aspecto de la pantalla, la orientaci\u00f3n del dispositivo, la profundidad del color y la precisi\u00f3n del puntero. Las consultas de medios tambi\u00e9n pueden tener en cuenta las preferencias del usuario, como la reducci\u00f3n de animaciones, el modo claro\/oscuro y un mayor contraste.<\/p>\n<p>Los ejemplos que hemos mostrado demuestran las consultas de medios utilizando solo el ancho de la pantalla, pero los sitios pueden ser considerablemente m\u00e1s flexibles. Consulta el <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">conjunto completo de opciones en MDN<\/a> para m\u00e1s detalles.<\/p>\n<p>El <a href=\"https:\/\/caniuse.com\/css-mediaqueries\">soporte de Media query es excelente<\/a> y ha estado en los navegadores por m\u00e1s de una d\u00e9cada. Solo IE8 y los inferiores no tienen soporte. Ignoran los estilos aplicados por las consultas de medios, pero esto a veces puede ser una ventaja (lee m\u00e1s en la secci\u00f3n de <strong>Mejores Pr\u00e1cticas <\/strong>m\u00e1s adelante).<\/p>\n<p>Existen tres formas est\u00e1ndar de aplicar estilos mediante consultas de medios. La primera carga hojas de estilo espec\u00edficas en el <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\">c\u00f3digo HTML<\/a>. Por ejemplo, la siguiente etiqueta carga la hoja de estilo <strong>wide.css <\/strong>cuando un dispositivo tiene una pantalla de al menos 800 p\u00edxeles de ancho:<\/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>En segundo lugar, las hojas de estilo pueden cargarse condicionalmente en los archivos CSS utilizando una regla <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>Ten en cuenta que <code>@import<\/code> debe evitarse porque cada archivo CSS importado bloquea la renderizaci\u00f3n. Las etiquetas HTML <code>&lt;link&gt;<\/code> se descargan en paralelo, mientras que <code>@import<\/code> descarga los archivos en serie.<\/p>\n<\/aside>\n\n<p>Lo m\u00e1s habitual es aplicar las consultas de medios en las hojas de estilo mediante un bloque de reglas @media CSS que modifica estilos espec\u00edficos. Por ejemplo:<\/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>Los desarrolladores pueden aplicar las reglas de media query que sean necesarias para adaptar el dise\u00f1o de un sitio.<\/p>\n<h2>Las mejores pr\u00e1cticas de Media Query<\/h2>\n<p>Cuando se idearon las consultas de medios, muchos sitios optaron por un conjunto de dise\u00f1os r\u00edgidos y fijos. Esto es conceptualmente m\u00e1s f\u00e1cil de dise\u00f1ar y codificar porque replica efectivamente un conjunto limitado de plantillas de p\u00e1gina. Por ejemplo:<\/p>\n<ol>\n<li>Los anchos de pantalla inferiores a 600px utilizan un dise\u00f1o similar al de los m\u00f3viles de 400px.<\/li>\n<li>Los anchos de pantalla entre 600px y 999px utilizan un dise\u00f1o tipo tableta de 600px de ancho.<\/li>\n<li>Los anchos de pantalla superiores a 1.000px utilizan un dise\u00f1o similar al de un ordenador de sobremesa de 1.000px.<\/li>\n<\/ol>\n<p>La t\u00e9cnica es defectuosa. Los resultados en pantallas muy peque\u00f1as y muy grandes pueden parecer pobres, y el mantenimiento de CSS puede ser necesario a medida que los dispositivos y los tama\u00f1os de pantalla cambian con el tiempo.<\/p>\n<p>Una mejor opci\u00f3n es utilizar un dise\u00f1o fluido <a href=\"https:\/\/kinsta.com\/es\/blog\/google-indexacion-centrada-moviles\/\">\u00abmobile-first\u00bb<\/a> con puntos de ruptura que adapten el dise\u00f1o a determinados tama\u00f1os. En esencia, el dise\u00f1o por defecto utiliza los estilos m\u00e1s sencillos para pantallas peque\u00f1as que posicionan los elementos en bloques verticales lineales.<\/p>\n<p>Por ejemplo, <code>&lt;article&gt;<\/code> y <code>&lt;aside&gt;<\/code> dentro de un contenedor <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>Este es el resultado en todos los navegadores, incluso en los m\u00e1s antiguos que no soportan media queries:<\/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=\"Ejemplo de captura de pantalla sin soporte de media query\" width=\"626\" height=\"200\"><\/a><figcaption id=\"caption-attachment-102292\" class=\"wp-caption-text\">Ejemplo de captura de pantalla sin soporte de media query<\/figcaption><\/figure>\n<p>Cuando se admiten las consultas de medios y la pantalla supera una anchura espec\u00edfica, digamos 500px, los elementos <code>&lt;article&gt;<\/code> y <code>&lt;aside&gt;<\/code> pueden posicionarse horizontalmente. Este ejemplo utiliza una <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\">cuadr\u00edcula CSS<\/a>, en la que el contenido principal utiliza aproximadamente dos tercios de la anchura, y el contenido secundario utiliza el tercio restante:<\/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>Aqu\u00ed est\u00e1 el resultado en pantallas m\u00e1s grandes:<\/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=\"Captura de pantalla de ejemplo con soporte de media query.\" width=\"602\" height=\"112\"><\/a><figcaption id=\"caption-attachment-102260\" class=\"wp-caption-text\">Captura de pantalla de ejemplo con soporte de media query.<\/figcaption><\/figure>\n<h2>Alternativas a Media Queries<\/h2>\n<p>Los dise\u00f1os con capacidad de respuesta tambi\u00e9n pueden implementarse en el CSS moderno utilizando nuevas propiedades que adaptan intr\u00ednsecamente el dise\u00f1o sin examinar las dimensiones de la ventana gr\u00e1fica. Las opciones incluyen:<\/p>\n<ul>\n<li><code>calc<\/code>, <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code>, <code>max-height<\/code>, y la m\u00e1s reciente propiedad <code>clamp<\/code> pueden definir dimensiones que dimensionan elementos de acuerdo a l\u00edmites conocidos y al espacio disponible.<\/li>\n<li>Las unidades de la ventana gr\u00e1fica <code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code> y <code>vmax<\/code> pueden dimensionar los elementos seg\u00fan las fracciones de las dimensiones de la pantalla.<\/li>\n<li>El texto puede mostrarse en columnas CSS que aparecen o desaparecen seg\u00fan lo permita el espacio.<\/li>\n<li>Los elementos pueden ser dimensionados de acuerdo a los tama\u00f1os de sus elementos hijos utilizando las dimensiones <code>min-content<\/code>, <code>fit-content<\/code> y <code>max-content<\/code>.<\/li>\n<li>CSS flexbox puede envolver &#8211; o <em>no <\/em>envolver &#8211; elementos cuando empiezan a exceder el espacio disponible.<\/li>\n<li>Los elementos de la cuadr\u00edcula CSS pueden tener un tama\u00f1o proporcional a las unidades de fracci\u00f3n <code>fr<\/code>. La funci\u00f3n CSS de repetici\u00f3n puede utilizarse junto con <code>minmax<\/code>, <code>auto-fit<\/code> y <code>auto-fill<\/code> para asignar el espacio disponible.<\/li>\n<li>Las nuevas y (actualmente) experimentales <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\">consultas de contenedores CSS<\/a> pueden reaccionar al espacio parcial disponible para un componente dentro de un dise\u00f1o.<\/li>\n<\/ul>\n<p>Estas opciones est\u00e1n m\u00e1s all\u00e1 del alcance de este art\u00edculo, pero a menudo son m\u00e1s pr\u00e1cticas que las consultas de medios m\u00e1s crudas, que solo pueden responder a las dimensiones de la pantalla. Si puedes lograr un dise\u00f1o sin consultas de medios, probablemente utilizar\u00e1 menos c\u00f3digo, ser\u00e1 m\u00e1s eficiente y requerir\u00e1 menos mantenimiento con el tiempo.<\/p>\n<p>Dicho esto, hay situaciones en las que las consultas de medios siguen siendo la \u00fanica opci\u00f3n de dise\u00f1o viable. Siguen siendo esenciales cuando hay que tener en cuenta otros factores de la pantalla, como las relaciones de aspecto, la orientaci\u00f3n del dispositivo, la profundidad del color, la precisi\u00f3n del puntero o las preferencias del usuario, como la reducci\u00f3n de las animaciones y el modo luz\/oscuridad.<\/p>\n<h2>\u00bfNecesitas Media Queries en JavaScript?<\/h2>\n<p>Hasta ahora hemos hablado principalmente de CSS. Esto se debe a que la mayor\u00eda de los problemas de dise\u00f1o pueden -y <em>deben<\/em>&#8211; resolverse \u00fanicamente con CSS.<\/p>\n<p>Sin embargo, hay situaciones en las que es pr\u00e1ctico utilizar una consulta de medios de JavaScript en lugar de CSS, como cuando:<\/p>\n<ul>\n<li>Un componente, como un men\u00fa, tiene una funcionalidad diferente en pantallas peque\u00f1as y grandes.<\/li>\n<li>El cambio a y desde retrato\/paisaje afecta a la funcionalidad de una aplicaci\u00f3n web.<\/li>\n<li>Un juego t\u00e1ctil tiene que cambiar la disposici\u00f3n del <code>&lt;canvas&gt;<\/code> o adaptar los botones de control.<\/li>\n<li>Una aplicaci\u00f3n web se adhiere a las preferencias del usuario, como el modo oscuro\/luz, la reducci\u00f3n de la animaci\u00f3n, la tosquedad del tacto, etc.<\/li>\n<\/ul>\n<p>Las siguientes secciones demuestran tres m\u00e9todos que utilizan consultas de medios &#8211; u opciones similares a las consultas de medios &#8211; en <a href=\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\">JavaScript<\/a>. Todos los ejemplos devuelven una cadena de estado donde:<\/p>\n<ul>\n<li>vista <strong>peque\u00f1a <\/strong>= una pantalla con una anchura inferior a 400 p\u00edxeles;<\/li>\n<li>vista <strong>media <\/strong>= una pantalla con una anchura entre 400 y 799 p\u00edxeles; y<\/li>\n<li>vista <strong>grande <\/strong>= una pantalla con una anchura de 800 p\u00edxeles o m\u00e1s.<\/li>\n<\/ul>\n<h2>Opci\u00f3n 1: Controlar las dimensiones de la ventana gr\u00e1fica<\/h2>\n<p>Esta es la \u00fanica opci\u00f3n en los d\u00edas oscuros antes de que se implementaran las consultas de medios. JavaScript escuchaba los eventos de \u00abredimensionamiento\u00bb del navegador, analizaba las dimensiones de la ventana gr\u00e1fica utilizando <code>window.innerWidth<\/code> y <code>window.innerHeight<\/code> (o <code>document.body.clientWidth<\/code> y <code>document.body.clientHeight<\/code> en los antiguos IE), y reaccionaba en consecuencia.<\/p>\n<p>Este c\u00f3digo muestra en la consola la cadena <strong>peque\u00f1a<\/strong>, <strong>mediana <\/strong>o <strong>grande <\/strong>calculada:<\/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>Puede ver una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\">demostraci\u00f3n en funcionamiento aqu\u00ed<\/a>. (Si utilizas un navegador de escritorio, abre este enlace en una nueva ventana para facilitar el cambio de tama\u00f1o. Los usuarios de m\u00f3viles pueden girar el dispositivo).<\/p>\n<p>El ejemplo anterior examina el tama\u00f1o de la ventana gr\u00e1fica a medida que se redimensiona el navegador; determina si es peque\u00f1o, mediano o grande; y lo establece como una clase en el elemento body, que cambia el color de fondo.<\/p>\n<p>Las ventajas de este m\u00e9todo son:<\/p>\n<ul>\n<li>Funciona en todos los <a href=\"https:\/\/kinsta.com\/es\/cuota-mercado-mundial-navegadores\/\">navegadores<\/a> que pueden ejecutar JavaScript, incluso en aplicaciones antiguas.<\/li>\n<li>Captas las dimensiones exactas y puedes reaccionar en consecuencia.<\/li>\n<\/ul>\n<p>Las desventajas:<\/p>\n<ul>\n<li>Es una t\u00e9cnica antigua que requiere un c\u00f3digo considerable.<\/li>\n<li>\u00bfEs demasiado exacto? \u00bfRealmente necesita saber cu\u00e1ndo el ancho es de 966px frente a 967px?<\/li>\n<li>Es posible que tenga que hacer coincidir manualmente las dimensiones con la correspondiente consulta de medios CSS.<\/li>\n<li>Los usuarios pueden cambiar el tama\u00f1o del navegador r\u00e1pidamente, haciendo que la funci\u00f3n del manejador se ejecute de nuevo cada vez. Esto puede sobrecargar a los navegadores m\u00e1s antiguos y lentos al estrangular el evento. Solo puede activarse una vez cada 500 milisegundos.<\/li>\n<\/ul>\n<p>En resumen, no controle las dimensiones de la ventana gr\u00e1fica a menos que tenga requisitos de tama\u00f1o muy espec\u00edficos y complejos.<\/p>\n<h2 id=\"option2\">Opci\u00f3n 2: Define y supervisa una propiedad personalizada CSS (variable)<\/h2>\n<p>Esta es una t\u00e9cnica ligeramente inusual que cambia el valor de una cadena de propiedades personalizadas en CSS cuando se activa una consulta de medios. Las propiedades personalizadas son <a href=\"https:\/\/kinsta.com\/es\/blog\/navegador-mas-seguro\/\">compatibles con todos los navegadores modernos<\/a> (pero no con IE).<\/p>\n<p>En el siguiente ejemplo,\u00a0 <code>--screen custom property<\/code> se establece como \u00abpeque\u00f1a\u00bb, \u00abmediana\u00bb o \u00abgrande\u00bb dentro de un bloque 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>El valor puede ser emitido en CSS solo utilizando un pseudo-elemento (pero ten en cuenta que debe estar contenido entre comillas simples o dobles):<\/p>\n<pre><code class=\"language-css\">p::before {\n  content: var(--screen);\n}<\/code><\/pre>\n<p>Puedes obtener el valor de la propiedad personalizada utilizando JavaScript:<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Sin embargo, esto no es todo, porque el valor devuelto contiene todos los espacios en blanco y las comillas definidas despu\u00e9s de los dos puntos en el CSS. La cadena ser\u00e1 &#8216; \u00abgrande\u00bb&#8216;, por lo que es necesario un poco de orden:<\/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>Puedes ver una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\">demostraci\u00f3n en funcionamiento aqu\u00ed<\/a>. (Si utiliza un navegador de escritorio, abra este enlace en una nueva ventana para facilitar el cambio de tama\u00f1o. Los usuarios de m\u00f3viles pueden girar el dispositivo).<\/p>\n<p>El ejemplo examina el valor CSS cada dos segundos. Requiere un poco de c\u00f3digo JavaScript, pero es necesario para sondear los cambios &#8211; no se puede detectar autom\u00e1ticamente que el valor de la propiedad personalizada ha cambiado usando CSS.<\/p>\n<p>Tampoco es posible escribir el valor en un pseudo-elemento y detectar el cambio utilizando un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\">Observador de Mutaci\u00f3n DOM<\/a>. Los pseudoelementos no son una parte \u00abreal\u00bb del DOM.<\/p>\n<p>Las ventajas:<\/p>\n<ul>\n<li>Es una t\u00e9cnica sencilla que utiliza principalmente CSS y coincide con las consultas de medios reales.<\/li>\n<li>Cualquier otra propiedad CSS puede ser modificada al mismo tiempo.<\/li>\n<li>No es necesario duplicar o analizar las cadenas de consulta de medios de JavaScript.<\/li>\n<\/ul>\n<p>La principal desventaja es que no se puede reaccionar autom\u00e1ticamente a un cambio en la dimensi\u00f3n de la ventana gr\u00e1fica del navegador. Si el usuario gira su tel\u00e9fono de orientaci\u00f3n vertical a horizontal, el JavaScript nunca lo sabr\u00e1. Se puede sondear con frecuencia los cambios, pero eso es ineficiente y da lugar al retraso que se ve en nuestra demostraci\u00f3n.<\/p>\n<p>La supervisi\u00f3n de las propiedades personalizadas de CSS es una t\u00e9cnica novedosa, pero solo es pr\u00e1ctica cuando:<\/p>\n<ol>\n<li>El dise\u00f1o puede fijarse en el punto en el que la p\u00e1gina se renderiza inicialmente. Un quiosco o un <a href=\"https:\/\/kinsta.com\/es\/blog\/stripe-vs-square\/\">terminal de punto de venta<\/a> es una posibilidad, pero es probable que tengan resoluciones fijas y un \u00fanico dise\u00f1o, por lo que las consultas de medios de JavaScript son irrelevantes.<\/li>\n<li>El sitio o la aplicaci\u00f3n ya ejecuta funciones frecuentes basadas en el tiempo, como la animaci\u00f3n de un juego. La propiedad personalizada podr\u00eda comprobarse al mismo tiempo para determinar si se requieren cambios de dise\u00f1o.<\/li>\n<\/ol>\n<h2>Opci\u00f3n 3: Utiliza la API matchMedia<\/h2>\n<p>La <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">API matchMedia<\/a> es un poco inusual, pero permite implementar una consulta de medios en JavaScript. Es <a href=\"https:\/\/caniuse.com\/matchmedia\">compatible con la mayor\u00eda de los navegadores<\/a> a partir de IE10. El constructor devuelve un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\">objeto MediaQueryList<\/a> que tiene una propiedad matches que eval\u00faa a true o false para tu consulta de medios espec\u00edfica.<\/p>\n<p>El siguiente c\u00f3digo da como resultado verdadero cuando el ancho de la ventana gr\u00e1fica del navegador es de 800px o mayor:<\/p>\n<pre><code class=\"language-js\">const mqLarge  = window.matchMedia( '(min-width: 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>Se puede aplicar un evento \u00abchange\u00bb al objeto MediaQueryList. Esto se dispara cada vez que el estado de la propiedad matches cambia: Se convierte en verdadero (m\u00e1s de 800px) despu\u00e9s de ser previamente falso (menos de 800px) o viceversa.<\/p>\n<p>A la funci\u00f3n de recepci\u00f3n se le pasa el objeto MediaQueryList como primer par\u00e1metro:<\/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>El manejador solo se ejecuta cuando la propiedad matches cambia. No se ejecutar\u00e1 cuando la p\u00e1gina se cargue inicialmente, as\u00ed que puedes llamar a la funci\u00f3n directamente para determinar el estado inicial:<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-http-api-parte-2\/\">API<\/a> funciona bien cuando se mueve entre dos estados distintos. Para analizar tres o m\u00e1s estados, como el <strong>peque\u00f1o<\/strong>, el <strong>mediano <\/strong>y el <strong>grande<\/strong>, requerir\u00e1 m\u00e1s c\u00f3digo.<\/p>\n<p>Comience por definir un objeto de estado de pantalla con objetos matchMedia asociados:<\/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>No es necesario definir un objeto matchMedia en el estado <strong>peque\u00f1o <\/strong>porque el manejador de eventos del medio se activar\u00e1 al pasar de <strong>peque\u00f1o <\/strong>a <strong>medio<\/strong>.<\/p>\n<p>A continuaci\u00f3n, se pueden establecer escuchas de eventos para los eventos <strong>medianos <\/strong>y <strong>grandes<\/strong>. Estos llaman a la misma funci\u00f3n manejadora mqHandler():<\/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>La funci\u00f3n manejadora debe comprobar todos los objetos MediaQueryList para determinar si el tama\u00f1o <strong>peque\u00f1o<\/strong>, <strong>mediano <\/strong>o <strong>grande <\/strong>est\u00e1 actualmente activo. Las coincidencias deben ser ejecutadas en orden de tama\u00f1o, ya que un ancho de 999px coincidir\u00eda tanto con el <strong>mediano <\/strong>como con el <strong>grande <\/strong>&#8211; solo el m\u00e1s grande debe \u00abganar\u00bb:<\/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>Puede ver una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\">demostraci\u00f3n en funcionamiento aqu\u00ed<\/a>. (Si utilizas un navegador de escritorio, abra este enlace en una nueva ventana para facilitar el cambio de tama\u00f1o. Los usuarios de m\u00f3viles pueden girar el dispositivo).<\/p>\n<p>Los ejemplos de uso son:<\/p>\n<ol>\n<li>Consultas de medios en CSS para establecer y mostrar una propiedad personalizada (como se muestra en la <strong>opci\u00f3n 2 <\/strong>anterior).<\/li>\n<li>Consultas de medios id\u00e9nticas en objetos matchMedia para controlar los cambios de dimensi\u00f3n en JavaScript. La salida de JavaScript cambiar\u00e1 exactamente al mismo tiempo.<\/li>\n<\/ol>\n<p>Las principales ventajas de utilizar la API matchMedia son<\/p>\n<ul>\n<li>Se basa en los eventos y es eficiente en el procesamiento de los cambios de consulta de medios.<\/li>\n<li>Utiliza cadenas de consulta de medios id\u00e9nticas a las de CSS.<\/li>\n<\/ul>\n<p>Las desventajas:<\/p>\n<ul>\n<li>Manejar dos o m\u00e1s consultas de medios requiere m\u00e1s reflexi\u00f3n y l\u00f3gica de c\u00f3digo.<\/li>\n<li>Probablemente necesites duplicar las cadenas de consulta de medios en el c\u00f3digo CSS y JavaScript. Esto podr\u00eda dar lugar a errores si no los mantienes sincronizados.<\/li>\n<\/ul>\n<p>Para evitar desajustes en las consultas de medios, puedes considerar el uso de tokens de dise\u00f1o en tu sistema de construcci\u00f3n. Las cadenas de consulta de medios se definen en un archivo JSON (o similar) y los valores se introducen en el c\u00f3digo CSS y JavaScript en el momento de la compilaci\u00f3n.<\/p>\n<p>En resumen, la API matchMedia es probablemente la forma m\u00e1s eficiente y pr\u00e1ctica de implementar una consulta de medios en JavaScript. Tiene algunas peculiaridades, pero es la mejor opci\u00f3n en la mayor\u00eda de las situaciones.<\/p>\n\n<h2>Resumen<\/h2>\n<p>Las opciones intr\u00ednsecas de tama\u00f1o de CSS son cada vez m\u00e1s viables, pero las consultas de medios siguen siendo la base del <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/\">dise\u00f1o web responsivo<\/a> para la mayor\u00eda de los sitios. Siempre ser\u00e1n necesarias para gestionar dise\u00f1os m\u00e1s complejos y preferencias de los usuarios, como el modo claro\/oscuro.<\/p>\n<p>Intenta mantener las consultas de medios solo en CSS siempre que sea posible. Cuando no tengas m\u00e1s remedio que aventurarte en el terreno de JavaScript, la API matchMedia proporciona un control adicional para los componentes de consulta de medios de JavaScript, que requieren una funcionalidad adicional basada en las dimensiones.<\/p>\n<p>\u00bfTienes alg\u00fan otro consejo para implementar una consulta de medios de JavaScript? Comp\u00e1rtelos en la secci\u00f3n de comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La mayor\u00eda de los sitios web modernos utilizan t\u00e9cnicas de dise\u00f1o web responsivo\u00a0para garantizar que se vean bien, sean legibles y sigan siendo utilizables en dispositivos &#8230;<\/p>\n","protected":false},"author":188,"featured_media":43867,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[867,858],"topic":[1330,1297],"class_list":["post-43864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-framework","topic-experiencia-de-usuario","topic-tutoriales-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>Gu\u00eda Completa Sobre el Uso de Media Queries en JavaScript<\/title>\n<meta name=\"description\" content=\"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en 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\/es\/blog\/media-queries-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript\" \/>\n<meta property=\"og:description\" content=\"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-14T11:24:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T14:13:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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 se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript\",\"datePublished\":\"2021-09-14T11:24:36+00:00\",\"dateModified\":\"2025-02-07T14:13:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\"},\"wordCount\":3358,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Framework\"],\"articleSection\":[\"Sin Categor\u00eda\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\",\"name\":\"Gu\u00eda Completa Sobre el Uso de Media Queries en JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-14T11:24:36+00:00\",\"dateModified\":\"2025-02-07T14:13:46+00:00\",\"description\":\"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Gu\u00eda completa para el uso de Media Queries en JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriales JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gu\u00eda Completa Sobre el Uso de Media Queries en JavaScript","description":"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en 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\/es\/blog\/media-queries-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript","og_description":"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.","og_url":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-09-14T11:24:36+00:00","article_modified_time":"2025-02-07T14:13:46+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Craig Buckler","Tiempo de lectura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript","datePublished":"2021-09-14T11:24:36+00:00","dateModified":"2025-02-07T14:13:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/"},"wordCount":3358,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Framework"],"articleSection":["Sin Categor\u00eda"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/","url":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/","name":"Gu\u00eda Completa Sobre el Uso de Media Queries en JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-14T11:24:36+00:00","dateModified":"2025-02-07T14:13:46+00:00","description":"Media Queries se definen normalmente en CSS para hacer que el dise\u00f1o de un sitio sea responsivo. Media Queries tambi\u00e9n pueden utilizarse en JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Gu\u00eda completa para el uso de Media Queries en JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/media-queries-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Tutoriales JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/tutoriales-javascript\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda Completa sobre el Uso de Media Queries en JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/43864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=43864"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/43864\/revisions"}],"predecessor-version":[{"id":44013,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/43864\/revisions\/44013"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/43864\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/43867"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=43864"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=43864"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=43864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}