Tengo un elemento de interfaz de usuario que está diseñado para funcionar mejor con un ancho exacto de '200 px'. Pero si el tamaño de la interfaz de usuario necesita cambiar según el tamaño de la ventana/medios, sería una molestia tener que ajustar este componente poco a poco y cambiar el ancho de 200px .
¿Cambiar el tamaño de un componente usando transform: scale(x) para ajustar el tamaño de la ventana/medios es una práctica aceptable? ¿Es costoso en rendimiento? En la práctica, el tamaño de la ventana/medio se establecerá desde el principio, por lo que la función de escala solo tendrá que ejecutarse una vez de todos modos.
if (screen width < 600px) { element.style.transform = "scale(.7)" } else { element.style.transform = "scale(1)" }¿Es transform: scale(x) una operación costosa?
No, la operación de transformación no requiere una actualización de DOM. Un navegador realiza una actualización de representación. Sus ventajas son que sus costos de rendimiento son bajos, funciona rápido. Sus contras son que la escala podría degradar en gran medida su calidad visual (por ejemplo, imágenes borrosas), el componente reducido con su contenido podría ser difícil de usar o leer.
Un uso de JS para configurar CSS es definitivamente una forma costosa de realizar cambios. La forma más eficiente es usar solo CSS (consulta de medios).
Parece extraño "escalar" un componente para una pantalla pequeña. Una forma común de resolverlo ahora es hacer un diseño receptivo. Pero piense, no necesita dejar que su contenido sea dinámico por dentro. Tal tarea podría resolverse con CSS. Sólo da otro paso adelante. Vincule el contenido interno con los tamaños externos en CSS: use unidades em / rem en lugar de px para todas sus medidas. Y la consulta de medios solo cambiará su font-size base. Diferente tamaño, sin posibles problemas de visualización de escala, misma posición de contenido. :)
El CSS podría ser así a continuación. Lo sentimos, un mínimo de trabajo HTML, CSS, JS para demostrar el concepto. Para verificar JS en diferentes tamaños de pantalla en este fragmento, cambie el tamaño de su pantalla, actualice el fragmento. La opción CSS funciona sin actualizar.
function setSizeJs() { const element = document.getElementById('target-element-px'); element.style.transform = window.innerWidth < 600 ? 'scale(.7)' : 'scale(1)'; } .parent { font-size: 14px; } #target-element-px { /* original width */ width: 200px; /* colorize element to show its size */ background-color: green; } #target-element-em { /* main style, will be applied always */ /* an equivalent of 'width 200px' in EMs, where EM is taken as '14px' from the 'parent' class */ width: 14.28571428571429em; background-color: grey; } @media screen and (max-width: 600px) { /* additional style, will be applied only when the screen size will be less than 600px */ /* it will overwrite the main style */ #target-element-em { font-size: 0.7em; } } <div class="parent"> <div id="target-element-px" class="target-element" onload="setSizeJs"> Some content for original 200px width </div> <div id="target-element-em" class="target-element"> Some content for original 200px width </div> </div>