Altura de consulta de medios CSS mayor que el ancho y viceversa (o cómo imitar con JavaScript)

La mayoría de las pantallas de escritorio y portátiles en la actualidad tienen un ancho mayor que la altura. La pantalla es "ancha" no "alta". Los teléfonos inteligentes han hecho algo bastante bueno al permitir que la orientación del teléfono influya en la forma en que se presenta el contenido.

Me gustaría hacer esto con las consultas de los medios, de modo que si alguien en un mac con un monitor grande tiene el tamaño de la ventana del navegador para que sea muy alto (la altura sea mayor que el ancho) vería un encabezado y un pie de página. Pero si fueran a pantalla completa o "amplia" (el ancho es mayor que la altura) verían una barra lateral a la izquierda y tal vez también a la derecha.

Estoy tratando de aprovechar al máximo las pantallas anchas, las orientaciones y demás. ¿Cómo hacer esto con consultas de medios o javascript?

Respuestas a la pregunta(2)

Su respuesta a la pregunta