Use CSS Transforms o javascript para escalar un elemento para adaptarlo a su elemento principal de forma dinámica

Question

Tengo una página en la que tengo una rueda de elementos <div>, toda la rueda gira cuando hace clic en un botón.

Lo logro utilizando transformaciones CSS, que son de naturaleza absoluta. Sin embargo, la rueda es muy grande, se ve bien en mi pantalla HD, pero las pantallas más pequeñas se cortan los bordes. No puedo usar% widths como podría con un diseño normal, lo que necesito es escalar toda la página de la misma manera que funcionan las funciones de zoom de la mayoría de los navegadores.

Para mí, sé que ctr + mouseWheel alejará la página para que pueda ver toda la página, sin embargo, no puedo esperar que otros lo hagan.

Sé que puedo usar -browser-transform: scale(amt); en un envoltorio div para obtener el efecto que quiero, sin embargo, no puedo encontrar una manera de hacerlo de forma dinámica. Si configuro la escala a .5, será .5, sin importar la pantalla. Quiero que los bordes de la rueda sean solo unos pocos píxeles desde los bordes de la pantalla en CUALQUIER pantalla. Sé que las consultas de los medios se podrían utilizar para ayudar con el problema, pero me dejarían con resultados que no son ideales o que requieren demasiadas consultas diferentes. Debe haber una manera de modificar -browser-transform: scale(amt); programmatically, o de alguna otra manera para tener control finito.

¿Alguna idea?

Answer 1

¿Ha intentado utilizar las consultas de medios en css para dirigirse a diferentes pantallas. por ejemplo, tenga una consulta de medios en su archivo css que indique que con un ancho de 320 a 480 píxeles, el div que contiene esta rueda se escalará al 50%. Luego, a 481-768 píxeles, el contenedor div se escala al 75%. y desde 769 píxeles hacia arriba, el div se escala al 100%.

Eso debería ayudarlo a lograr la escala dinámica que desea en diferentes tamaños de pantalla. Si desea una demostración, me alegrará hacer que jsfiddle lo muestre.