В прошлый раз мы создали веб-страницу с картой. Давайте научимся изменять её размер. Напомню, что все изменения нужно вносить в html-файл, который мы сделали в первом уроке. Если у вас нет нужного файла, скопируйте его содержимое со страницы урока (но лучше, конечно, пройдите весь урок).
Чтобы увидеть изменения, откройте файл в браузере.
Размер
Найдите в html-файле вот такую строчку:
<div id="map" style="width: 600px; height: 400px"></div>
Если помните, <div> с идентификатор "map" — это элемент, в котором лежит карта. Как видите, для него указаны ширина и высота: 600 на 400 пикселей. Ну а карта занимает всё содержимое своего контейнера, поэтому она у нас получилась именно такого размера.
Ширину и высоту элемента задают разными способами: в пикселях, в процентах от размера родительского элемента, относительно размеров страницы и так далее — если интересно, почитайте об этом подробнее.
Попробуйте изменить ширину и высоту в коде, чтобы значение параметра style было "width: 300px; height: 300px" — карта станет небольшой и квадратной. Напишите "width: 50%; height: 100px", и карта по вертикали совсем сожмётся, а по горизонтали займёт половину окна. Измените ширину окна, и размер карты тоже изменится.
Сделаем карту во всё окно. Для этого используем единицы измерения vw и vh. Одна единица vw и vh равна одному проценту ширины или высоты соответственно. Чтобы сделать карту во всё окно, напишем "width: 100vw; height: 100vh".
Не все программисты используют vw и vh, потому что этот способ поддерживают не все браузеры. Но это простые и понятные единицы, которые удобно использовать, если вам не требуется гарантировать работу в совсем уж старых браузерах. Так что для учебных целей они годятся.
В заключение
Вот пример из этого урока на CodePen, чтобы попробовать онлайн. И одним файлом, чтобы сохранить к себе.
Спасибо за внимание. Ставьте пальцы вверх, подписывайтесь на канал в Дзене (кнопка наверху) и в телеграме, присылайте свои работы и вопросы на почту: webmax17@yandex.ru. До следующего урока!
update: Урок 3