Я новичок в веб-разработке и изо всех сил пытаюсь понять область просмотра и модуль CSS, которые связаны с адаптивным дизайном, скажем, у меня есть два монитора, один из которых 10 дюймов с разрешением 1000X1000 пикселей, а соотношение пикселей устройства равно 1. другой экран 20 дюймов с разрешением 2000X2000 пикселей (разрешение на самом деле такое же, как у первого), соотношение пикселей устройства также равно 1.
И у меня есть изображение 500X500px, которое отображается и занимает четверть первого экрана. Если я хочу, чтобы это изображение отображалось и занимало четверть второго экрана, я не могу сделать это, установив видовой экран как
<meta name="viewport" content="width=device-width, initial-scale=1.0">
и изображение будет занимать одну шестнадцатую часть второго экрана, поэтому изображение не может быть пропорционально отображено на экранах разного размера, так как мы можем сделать его отзывчивым?