Проблема разрешения ширины в пикселях на экране

Question

В этой настройке

<div class="a">

</div>

.a {
   width: 400px;
   height: 600px;
}

1. , если разрешение экрана 1600 * 1200, будет ли ширина div 25% экрана в браузере?

2. , если разрешение экрана 4000 * 2400, будет ли ширина div в браузере 10% от ширины экрана?

Я хочу быть всегда 25 %.

Если я использую процент для установки ширины, div будет уменьшаться автоматически, когда браузер не в полноэкранном режиме.

Answer 1

Вместо px или% рекомендуется использовать следующие единицы, чтобы ваш div или любые элементы реагировали на размер экрана при нацеливании на «область просмотра». Ширина области просмотра (vw) Высота области просмотра (vh) - эта единица измерения основана на высоте области просмотра. Значение 1vh равно 1% высоты области просмотра. Ширина области просмотра (vw) - эта единица основана на ширине области просмотра. Значение 1vw равно 1% ширины области просмотра. например ширина: 40vw; высота: 60vh;

Это исправит вашу проблему. Вы также можете использовать этот блок при определении размера ваших шрифтов.

Answer 2

Попробуйте использовать% вместо px. % более отзывчивы и подстраиваются под любое разрешение экрана

.a{
  width: 40%;
  height: 60%; 
}