Editor X: configurar el tamaño de tu elemento

Con las opciones del panel Inspector profesional, puedes establecer el tamaño de tu elemento exactamente como lo deseas. Ingresa valores fijos de ancho y altura para obtener una precisión perfecta en píxeles, o usa medidas fluidas para que el elemento se ajuste perfectamente a cualquier tamaño de pantalla. 

Antes de agregar contenido a tu sitio, es importante crear una estructura y construir tus capas de acuerdo con esa lógica. Tus capas están organizadas en el modelo principal/secundario, lo que significa que la capa superior actúa como principal respecto de la capa inferior. 

El tamaño de un elemento principal puede afectar a sus elementos secundarios a medida que cambian de tamaño con respecto al elemento principal. Para asegurarte de que tu diseño se mantenga adaptable, define el tamaño y la posición de tus capas de arriba a abajo. 

Al cambiar el tamaño de un elemento, puedes elegir si deseas usar un tamaño fijo o fluido desde el panel del Inspector de propiedades:

En el Editor X, puedes usar una variedad de unidades de medida CSS diferentes para cambiar el tamaño de tus elementos. El tipo de medidas que deseas usar depende de cómo quieras que los elementos cambien de tamaño a medida que cambia el ancho de la ventana de visualización.

Haz clic a continuación para obtener más información sobre cada unidad de medida y cuándo usarla:

El cálculo es una herramienta útil cuando necesitas dimensionar con precisión un elemento mientras usas unidades de medida fluidas. Usando principios matemáticos, puedes escribir una "fórmula" que determine el ancho o la altura de un elemento. Incluso puedes combinar diferentes medidas en este cálculo (por ejemplo, vh y px).

Por ejemplo, usa el cálculo para diseñar un encabezado (100px) y una sección que, en conjunto, ocupen la altura exacta de la ventana de visualización (100vh) en cada tamaño de pantalla. Puedes establecer la altura de la sección en (100vh - 100px), por lo que el encabezado siempre se tiene en cuenta en el cálculo (100px). 

Estira el elemento para cubrir todo el fondo de su contenedor principal. Al usar cuadrículas, puedes estirar el elemento para cubrir una celda específica o toda el área de la cuadrícula. 

Al estirar un elemento se establece su ancho y alto en Automático para que el elemento y su contenedor cambien de tamaño según la ventana de visualización. Dado que el elemento está estirado, sus valores de ancho y alto serían los mismos que los de su contenedor principal.