Comportamiento tipo Media Query sobre el ancho de un div específico

Question

Estoy construyendo un editor donde el contenido de una publicación se carga en un div, y los selectores de jQuery me permiten editar el contenido en línea.

Acabo de tropezar con un obstáculo ya que estaba tratando de agregar un poco de sensibilidad al diseño de las plantillas: en mis hojas de estilo de plantilla, uso una identificación específica del área de vista previa para especificar dónde debe aplicarse el estilo . Aplico el mismo ID a la etiqueta del cuerpo de la visualización de la publicación para que tanto la vista previa en el editor como la vista completa de la publicación tengan el mismo aspecto.

Estaba haciendo algunas consultas de medios en el lado de la vista y me di cuenta de que en la página de vista previa, algo como @media screen and (max-width: 640px) se comportará de manera diferente porque la vista previa no ocupa todo el ancho de la pantalla.

¿Hay alguna forma de que pueda utilizar un selector de consulta de medio que no sea el ancho de la pantalla, sino el ancho de un elemento ... o algo equivalente? ¿O podría haber otra forma de imitar el comportamiento que simplemente con javascript ..

Answer 1

Lamentablemente, actualmente no existe una forma de que una consulta de medios se dirija a un div. Las consultas de medios solo pueden enfocarse en la pantalla, es decir, la ventana del navegador, la pantalla del dispositivo móvil, la pantalla del televisor, etc.

Answer 2

Por ahora estoy usando:

.preview { 
    zoom: .8; 
    -moz-transform: scale(0.8);} 

cuando el div .preview es el 80% del ancho de la página. En general, funciona, pero con algunos problemas, y no es del todo flexible ya que los divs en cuestión no siempre se establecerán en% del ancho de la página.