Uno de los componentes del diseño web responsivo es CSS Media Query. Los desarrolladores de WordPress utilizan la técnica media query para garantizar que un sitio web funcione de forma óptima en todos los dispositivos y tamaños de pantalla. Si hay algún problema con el funcionamiento de esta técnica CSS, puede aparecer el mensaje de error "media query not working in WordPress".
Solucionar el error 'media query not working in WordPress' es esencial para garantizar que su sitio web sea accesible para todos, independientemente del tipo y tamaño de pantalla. A continuación le ofrecemos algunos consejos para solucionar el error 'media query not working in WordPress'. Pero, antes de eso, he aquí una breve explicación de CSS media queries.
¿Qué son las consultas de medios CSS?
Como una de las características de CSS (Cascading Style Sheets), las consultas de medios permiten a los desarrolladores aplicar diferentes conjuntos de reglas CSS basadas en condiciones establecidas. Les ayuda a crear diseños variados en función del tipo de dispositivo o del tamaño de la ventana del navegador. Las consultas de medios se utilizan en un archivo .CSS individual o se pueden insertar en el HTML de una página web.
Es un estándar recomendado por el W3C para el diseño web responsivo. Además, garantiza que el contenido mostrado se adapte a diferentes condiciones, como la resolución de pantalla, la anchura del navegador y el tipo de dispositivo.
Uso de CSS Media Queries
Garantizar que el usuario tenga una experiencia mejorada al navegar por un sitio web es uno de los factores para mejorar la clasificación de un sitio web en los resultados de búsqueda, y aquí es donde CSS Media Query puede ayudar.
Las consultas de medios ayudan a personalizar el aspecto de las páginas web en todos los dispositivos, tamaños de pantalla y resoluciones. Proporciona instrucciones específicas que indican al navegador cómo representar las páginas web cuando se visualizan en dispositivos móviles, de sobremesa u otros.
Al utilizar la consulta de medios CSS, los desarrolladores pueden crear sitios web accesibles y legibles en todos los dispositivos sin tener que crear un sitio web móvil aparte.
Relacionados: Diferencia entre un sitio móvil y un sitio responsivo
He aquí un ejemplo de consulta de medios:
@media screen and (max-width: 480px){header { height: 70px; }article { font-size: 14px; }img { max-width: 480px; }}Las consultas de medios se utilizan para:
- Aplicación de estilos condicionales con las reglas @media y @import de CSS.
- Desplazamiento de una barra lateral por debajo del contenido del sitio cuando una página se visualiza en modo vertical en un dispositivo móvil.
- Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.
- Ajuste del ancho de columna en función del tamaño de la pantalla del dispositivo.
- Cambio de diseño en dispositivos móviles de dos columnas a una.
Sintaxis de las consultas multimedia
Una consulta de medios consta de los cuatro elementos siguientes. Si entiendes la sintaxis, podrás utilizar las consultas de medios correctamente.
Regla @media
Este elemento ayuda a declarar (especificar) la intención de establecer una media query en CSS. Introduzca @media sin espacios intermedios.
Tipo de medio
El tipo de medio se refiere al tipo de dispositivo para el que se utiliza la consulta de medios. Incluye las siguientes reglas:
- Todos: Sirve para todos los dispositivos y, en los casos en que no se especifica el tipo de soporte, se utiliza "todos".
- Discurso: Este tipo de medio se aplica (o está destinado a) lectores de pantalla.
- Imprimir: Si un material de página o un documento está en el modo de vista previa de impresión, se aplica el tipo de soporte "impresión". Este tipo de soporte se utiliza para impresoras.
- Pantalla: Esta regla CSS se aplica a las pantallas: smartphones, ordenadores de sobremesa, tabletas, etc.
Medios de comunicación
El elemento media features se utiliza para añadir detalles específicos. Todas las expresiones de características de medios se colocan entre corchetes, como un max-width de 400px (dispositivos móviles). En este caso, la característica de medios max-width se utiliza para dispositivos móviles.
Otras características de los medios y sus funciones son las siguientes:
- Anchura: Se refiere a la anchura de la ventana gráfica.
- Max-width: Define la 'anchura máxima' de la ventana del navegador.
- Altura: Se refiere a la altura de la ventana gráfica.
- Altura máxima: Define la altura máxima de la ventana del navegador.
- Altura mínima: Define la altura mínima de la ventana del navegador.
- Orientación: Se refiere a la orientación de la ventana gráfica. (modo horizontal o vertical).
Operadores lógicos
Los operadores lógicos ayudan a componer consultas de medios complejas e incluyen los elementos not, and y only. También se pueden utilizar comas para combinar una o varias consultas de medios en una única regla.
- Not: Si utiliza el operador "not", debe especificar un tipo de medio. Normalmente, el operador "not" niega una consulta de medios.
- Y: Para combinar dos o más características multimedia en una única consulta multimedia, utilice el operador "y". Este operador también puede ayudar a unir tipos de medios con características de medios.
- Sólo: El operador "only" es esencial para los navegadores más antiguos. Ayuda a los navegadores antiguos a interpretar correctamente la consulta de medios, evitando así problemas como el error "la consulta de medios no funciona en WordPress". Especifique también el tipo de medio cuando utilice el operador "not".
- , (coma): Este operador se utiliza para combinar varias consultas de medios en una sola regla. Cuando se utiliza una coma para separar varias consultas, cada consulta se trata por separado. Además, si la lista de consultas es verdadera, toda la lista de consultas de medios sigue siendo verdadera.
Consejos para arreglar Media Query no funciona en WordPress
Una consulta de medios CSS puede dar lugar a un error por varias razones. A veces, la consulta de medios puede funcionar en un dispositivo móvil, pero no en un ordenador de sobremesa. A veces puede no funcionar en todos los dispositivos. Para comprobar la consulta de medios de tu sitio, utiliza las herramientas de desarrollo del navegador e inspecciona el CSS de tu sitio. Haz clic en la pestaña "Estilos" para ver qué estilo se aplica al elemento (sintaxis) en cuestión.
La mayoría de las veces, la razón por la que 'media query no funciona en WordPress' es bastante común. Como tal, aquí hay algunas maneras de solucionar este error.
Comprobación de la declaración CSS en línea
Si has declarado el CSS dentro del documento HTML, podría causar el error 'media query not working in WordPress'. Puedes solucionarlo eliminando el 'CSS declarado inline' del documento HTML.
Otra forma es sustituir esta declaración por !important. Por ejemplo, para cambiar el color del texto de los párrafos a 'gris' en dispositivos móviles, utilice las siguientes líneas de CSS.
@media screen and (max-width: 1024px){ p{ color: gray; }}Sin embargo, a veces esto puede no funcionar debido al estilo en línea aplicado al mismo elemento. En tales casos, utilice la regla !important para anular el estilo en línea y solucionar el problema.
@media screen and (max-width: 1024px){ p{ color: gray !important; }}Posicionar correctamente las consultas multimedia
Otra razón del error 'media query not working in WordPress' es el posicionamiento incorrecto de las media queries. Para solucionarlo, añade la media query al final de la hoja de estilo.
Dado que los navegadores leen la hoja de estilo de arriba abajo, los códigos mencionados al final de la hoja de estilo pueden anular las declaraciones hechas al principio (excepto cuando se utiliza !important). Además, para las consultas pequeñas, coloque las consultas de medios antes de la pantalla grande.
Vea este ejemplo
body {background-color: black;}@media screen and (min-width: 480px) {body {background-color: blue;}}@media screen and (min-width: 850px) {body {background-color: light blue;text-align: center;}}- En la primera regla, el color de fondo es "negro" si la pantalla es inferior a 480px.
- En la segunda consulta de medios, el color de fondo es "azul" si la pantalla está entre 480 y 849px.
- Por último, si la pantalla es de 580px o más, el color de fondo será 'azul claro' con alineación central.
Escritorio frente a móvil
Una vez que haya establecido una consulta de medios, debería funcionar de forma óptima tanto en el escritorio como en el móvil. Sin embargo, si se produce un error en cualquiera de los dos, utilice los siguientes consejos para resolver el problema.
Media Query no funciona en el escritorio
Si ha utilizado la función de medios 'max-device-width' en lugar de 'max-width', podría dar lugar a que la consulta de medios no funcione en el error de escritorio. Aquí, 'max-width' se refiere al tamaño del área de visualización del dispositivo, mientras que 'max-device-width' se refiere al tamaño de pantalla de un dispositivo (móvil).
Para solucionar este error 'media query not working on desktop', cambia la característica media a 'max-width'. Esto especifica el área de visualización del navegador, no el tamaño real de la pantalla del dispositivo.
Media Query no funciona en dispositivos móviles
Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>Aquí, la "anchura" es el tamaño de la ventana gráfica, ajustado a la anchura del dispositivo. Indica al navegador que debe adaptar el sitio web a la pantalla de forma natural. La "escala inicial" define el nivel de zoom.
Leer: Cómo evitar CSS @import para mejorar la velocidad de carga de la página
Conclusión
Es importante que su sitio web sea accesible para todos, independientemente del tipo de dispositivo que utilicen. Un diseño web adaptable puede ayudarle a generar tráfico desde distintas fuentes. Con la indexación mobile-first de Google, también podría acelerar la indexación de las páginas web. Además, proporcionará una experiencia mejorada a los usuarios que naveguen por su sitio web en dispositivos móviles, lo que podría mejorar la clasificación de su sitio.
Solucionar el error 'media query not working in WordPress' es sencillo una vez identificada la razón. Puedes realizar los cambios necesarios siguiendo los consejos mencionados anteriormente.
Para evitar que el error 'media query not working in WordPress' vuelva a producirse, utilice plugins como Simple Custom CSS y WP Add Custom CSS para añadir una media query a su sitio web.
Además, si no puede solucionar el error 'media query not working in WordPress', póngase en contacto con nosotros. Somos una agencia de WordPress que ayuda a las empresas a solucionar errores comunes de WordPress en su sitio web sin causar ningún tiempo de inactividad.
¿Quieres crear un sitio web WordPress responsivo?
Nuestros desarrolladores pueden crear sitios web adaptables rápidos y sin errores.
