Отзывчивый и всегда квадратичный/соотношение 1: 1 div

Question

Я создаю простую игру в CSS и JavaScript, где я хочу, чтобы игровое поле было квадратичным, а ширина/высота - в зависимости от высоты видового экрана. Однако, если ширина окна просмотра меньше высоты, я хочу, чтобы размер поля обновлялся соответствующим образом и сохранял соотношение 1: 1.

Это мой код:

<div class="field"> 
    <div class="player"> 
    </div> 
</div> 

.field { 
    width: 75vh; 
    height: 75vh; 
    background: #B2EBF2; 
    border: 1.25vh solid #0097A7; 
} 
.field .player { 
    width: 5vh; 
    height: 5vh; 
    background: #727272; 
} 

JSFiddle demo

Он работает при изменении высоты окна/окна просмотра, но не в ширину. Как я могу сделать div отзывчивым и всегда квадратичным при изменении ширины видового экрана?

Благодаря

Answer 1

Использование запросов CSS медиа, чтобы проверить, если видовой экран в портретном или ландшафтном ориентации. В портрете ширина является наименьшим расстоянием и должна учитываться. В ландшафте это высота, самая маленькая.

fiddle

@media only screen and (orientation: portrait) { 
    .field { 
     width: 75vw; 
     height: 75vw; 
    } 
} 

@media only screen and (orientation: landscape) { 
    .field { 
     width: 75vh; 
     height: 75vh; 
    } 
} 

.field { 
    background: #B2EBF2; 
    border: 1.25vh solid #0097A7; 
} 

.field .player { 
    width: 5vh; 
    height: 5vh; 
    background: #727272; 
} 

Answer 2

просто дать поле мин-ширина и мин-высота

field { 
width: 75vh; 
height: 75vh; 
max-width: 600px; 
max-height: 300px; 
background: #B2EBF2; 
border: 1.25vh solid #0097A7; 
} 

.field .player { 
width: 5vh; 
height: 5vh; 
max-width: 600px; 
max-height: 300px; 
background: #727272; 
} 

я надеюсь, что это решит проблему