Problema con la consulta de medios en CSS
Pregunta
Hola @artf Hay un problema en la página de demostración y en la biblioteca en media query. El problema es que si el usuario actualiza el estilo primero en la vista móvil y luego en la vista de pestañas y luego en media consult, no funciona en la vista móvil. Si actualizamos primero el estilo para escritorio, luego la pestaña y móvil en tercero, todo funciona bien Pero si invertimos primero la vista móvil, segunda la vista de pestañas y tercera la vista de escritorio, luego CSS/Media Query No funcionará para la vista de tabulación y escritorio.
@media (ancho máximo: 480px) {
#if70u {
tamaño de fuente: 20px;
}
}
@media (max-width: 992px) {
#if70u {
tamaño de fuente: 40px;
}
}
Creo que fue porque 480 debería estar caído y 992 debería estar por encima. ¡Cualquier ayuda sería bienvenida, gracias!
Respuestas (3)
@Sharsie #1996
@artf problema es que si añadimos primero un estilo móvil y luego en la pestaña de la vista móvil, el CSS de la vista móvil se anula por vista de pestaña y todo el CSS aplicado a la vista móvil no se aplicará en la vista móvil porque se sobrescribe por vista de pestañas.
@artf ¿Alguna novedad sobre esto? Es un gran problema. El usuario no puede actualizar CSS para la pestaña una vez que solicita primero el mobie. Necesitan eliminar y volver a añadir ese elemento.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #896
[BUG] Las reglas de consulta de medios son anuladas por las reglas de clase en el lienzo
Hola @artf, He notado un problema mientras probaba una de mis plantillas usando diferentes configuraciones de dispositivos que supuestament...
Issue #1579
Problema del color del borde
@artf Hay un error en el color del borde si arrastras un botón en el editor y pegas color como rgb(255, 0, 0) en color del borde y seleccio...
Issue #1224
[Bug] Problemas con la consulta de medios y el renderizado de clases
Hola, Intentaba hacer un diseño responsivo, pero descubrí que el conmutador de dispositivos no funciona de forma consistente. El problema p...
Issue #1512
Deshacer/Rehacer no funciona en el elemento de Cuenta atrás y Navegación
Hola @artf, Cuando arrastro la cuenta atrás y la navegación en la demo en vivo y hago clic en deshacer/rehacer, no pasa nada. ¿Podríais pro...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.