Как изменить размер div и содержимого для любого размера экрана?

Это называется отзывчивым дизайном. При этом ваш сайт регулирует его размер в соответствии с устройством, которое его открыло.

Сначала вы должны включить это в свой HTML:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Подробнее о видовом экране здесь.

И в вашем CSS некоторые из обычных медиа-запросов:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Here you should set what size you want your div to be 
when viewed on smartphone */
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

Полный список медиа-запросов здесь

делать

style="height:66.67vh;"

Он должен изменить размер окна при изменении размера исходного окна.

Используйте единицы просмотра, указанные в CSS3, сначала вы должны установить метатег viewport:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Затем в CSS (без использования медиа-запросов) установите ширину div или любого другого элемента, который у вас есть, до 100vw (т.е. 100% ширины окна просмотра), и вы можете затем установить дочерние элементы в процентах, чтобы сохранить отзывчивость.

Вы можете рассчитать высоту и ширину экрана и установить высоту и ширину для вашего DIV.

//Calculate screen height and width
var winWidth=$( window ).width();

positionFromLeft=(winWidth - divWidth)/2;
positionFromRight=(winWidth - divWidth)/2;

Это должно работать для всех резолюций. Теперь вы можете установить позицию div слева и справа. Теперь ваш div появится в центре.