He creado una interfaz de usuario de la aplicación como se muestra en la siguiente imagen:

La parte superior es un párrafo (ocupa el 27 % de la pantalla), el centro es un gráfico (45 %), la parte inferior es una tabla (27 %).

¿Cómo hacer que se alineen correctamente en diferentes tamaños de pantalla?

Actualmente, los tres elementos se superponen cuando cambio el tamaño de la pantalla. Solo funciona en 1920 x 1080.

El uso @media only screen and (min-width) and (min-height) no es eficiente.

¿Cuál es el enfoque para definir el porcentaje del tamaño de los elementos y hacer que se coloquen correctamente en diferentes tamaños de pantalla? (Para no predecir las diferentes posibilidades del tamaño de la pantalla)

Gracias.