Учимся делать веб-сайты с нуля до трудоустройства. Разбираемся, как делать адаптивную верстку, чтобы сайт работал корректно на всех устройствах: телефон, планшет, ноутбук, большой экран.
Что было на прошлом занятии?
Мы завершили верстку дизайна и получили полностью рабочий код главной страницы.
Вот ссылка на архив с результатами прошлого урока:
https://github.com/madmaker/srmt22-lsn10/archive/refs/tags/v1.zip
Скачайте себе этот архив, распакуйте и откройте в vsCode. На его основе мы будем делать этот урок.
Что будет на этом уроке?
На этом уроке мы научимся делать адаптивную верстку. Сделаем так, чтобы сайт работал везде.
Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:
Для тех, кто только к нам присоединился, ссылка на все уроки:
И ссылка на самый первый урок:
Проверка верстки в консоли браузера
Итак, вы скачали архив с результатами прошлого занятия, распаковали, открыли в vsCode.
На всякий случай, ссылка на архив еще раз:
https://github.com/madmaker/srmt22-lsn10/archive/refs/tags/v1.zip
Откройте index.html в Хроме.
Теперь откройте правую панель с инструментами разработчика.
Откройте режим просмотра на разных устройствах:
Включится специальный режим, в котором можно посмотреть, как сайт выглядит на разных устройствах.
Вы можете регулировать размер экрана устройства, таская за нижний правый угол. Вы можете выбрать устройство в списке. Также можно размеры экрана задать вручную числом.
Давайте проверим на 6 разных ширинах, чтобы захватить размеры от большого монитора до маленького телефона.
Один нюанс: Chrome не будет корректно реагировать на стили для разных экранов, пока не допишем один мета-тег в раздел <head></head> (в любое место) в index.html
<meta name="viewport" content="width=device-width">
С этой строчкой Chrome будет корректно отображать в адаптивном виде сайт на разных экранах.
Теперь перед тем, как редактировать scss, давайте откроем терминал в vscode (в прошлых занятиях уже это делали) и выполним команду sass --watch scss:css - запустим наблюдатель за изменениями в scss, чтобы sass автоматически конвертировал scss в css.
1920, 1200, 900, 600, 400, 320
Проверяем на экран 1920px
На 1920 все нормально. Все равно нужно было проверить. Не ленитесь проверять. Мы могли обнаружить, что у нас поплыл фон, его не хватило, какие-то блоки могли вытянуться в линию. Подвал мог подвиснуть в центре экрана.
Экран 1200.
Здесь тоже все нормально.
Экран 900px
Первая проблема: Текст промоблока прилип к левой границе. Причем такая проблем сохраняется до ширины аж почти 1000px. Нужно исправить. Для этого для экранов размером до 1000px добавим внутренний отступ для промоблока.
У нас уже есть значение padding:4em 0; для всех экранов. Для экранов меньше 1000px сделаем padding:4em 2em;
Чтобы задать правило для экрана определенного размера, нужно использовать медиавыражение.
Выглядит этот код так:
@media (max-width:1000px) {
padding:4em 2em;
}
В скобках указываем максимальную ширину экрана, для которого это правило будет применяться. Если экран больше, то правило применяться не будет. Можно также использовать min-width.
Рекомендую почитать более подробно про медиавыражения:
Добавляем сразу под padding: 4em 0;
Блок с уроками вообще выглядит кошмарно. Причем, начиная где-то с 950.
Поэкспериментируем в консоли браузера, что будет, если сделать 2 колонки вместо трех.
Жмем правой кнопкой мыши на самое первое изображение и жмем "Просмотреть код"
Справа откроется панель с кодом страницы - будет выделен элемент, код которого мы заказали посмотреть - наше изображение.
Найдите его родительский блок с классом grid-wrapper.
В нижней части панели появятся правила css для выбранного элемента.
Будем редактировать grid-template-columns.
Давайте посмотрим, что будет, если оставить только 2 колонки. Пишем 1fr 1fr вместо 1fr 1fr 1fr.
Давайте посмотрим, что будет, если оставить одну колонку.
Мне показалось, что для экрана 900 лучше подходит 2 колонки несмотря на то, что в первом ряду две плитки, а во втором ряду только одна и пустота.
Будем для экранов до 1000px использовать вариант с двумя колонками.
Добавляем новый код:
Для 900 все.
Проверяем на ширине 600
На таком экране отступы между блоками нужно убрать. Как правило, когда верстаешь страницу, перед тем, как писать код в редакторе, проверяешь его в консоли браузера.
Жмем "Просмотреть код" у первого блока этапов обучения.
Найдите в правой панели в коде любой <article> в блоке с id #study-order.
Найдите, где у этого блока описан внешний отступ.
Попробуем убрать вертикальный отступ. Поставим margin: 0 auto;
Смотрим результат.
Отлично. Переписываем это в SCSS.
Промоблок тоже выглядит не лучшим образом.
Текст переносится на новую строку, короткое предложение на 4 строки разнесло. Отступы слишком большие.
Если убрать 2-колоночный вид и кнопку просто расположить под текстом и уменьшить отступы сверху и снизу, то будет намного лучше.
Попробуйте подобрать наилучший вариант стиля в консоли браузера сами.
Я еще проверил на размерах до 900 - такая проблема начинается почти на экране шириной 800px.
Я в итоге для экрана до 800px решил использовать такие правила:
#start-education-today .grid-wrapper { padding:1em2em grid-template-columns: 1fr; }
Блоку "Что изучаем" стало совсем плохо на экране 600px.
Если посмотреть внимательней, то такая ситуация почти до 900px.
В целом самым логичным решением будет просто избавиться от правой колонки с изображением в целом, а оставить только блок со списком технологий.
В grid-wrapper внутри #what-do-we-study для экранов до 900px оставляем только одну колонку.
Aside внутри #what-do-we-study для экранов до 900px вообще прячем. Display:none сделает так, чтобы этот блок не отображался.
"Уроки программирования" тоже склеились. Ситуация нормализуется от 700px.
Оставим только одну колонку для экранов до 700px
В остальном пока нормально.
Проверяем на экране 400
Вот здесь начинается самая жесть, как правило. Круче только 320px.
Все самое интересное начинается уже с шапки.
- Тест не поместился (и это проявляется почти до 700px)
- Справа появилась белая полоса
- Меню навигации разнесло
Будем разбираться.
Сначала уменьшим размер текста заголовка.
Теперь разберемся с навигацией.
Уберем вертикальную черту и обтекание слева для экранов до 700px.
Ставим float: none; и display:none в соответствующих блоках.
Осталось разобраться с белым отступом, который появился справа.
Вот в этом вся верстка. Мы написали все корректно, а работает непойми как. На самом деле сейчас еще все более-менее нормально. А раньше в разных браузерах все оказывалось буквально в разных углах.
Иногда приходится применять "костыли".
На самом деле скорее всего это происходит, потому что элементы под шапкой просто не помещаются под экран. но даже если мы сейчас все исправим, в дальнейшем на живом сайте вы не предусмотрите такие ситуации.
Нужно радикально решить эту проблему. Для body нужно прописать, что делать, когда контент переходит за границы.
overflow:auto
Бывают разные значения:
- hidden - скрывать контент, который не поместился
- auto - решить автоматически
- scroll - показывать полосу прокрутки (по умолчанию)
Шапку поправили
Заголовок "Практическое обучение..." тоже слишком большой. Нужно уменьшить шрифт. Заголовок на 4 строки не должен расползаться. Уменьшим до 1.3em на экранах до 700px
Разобрались.
Теперь уменьшим размер иконки.
Для .icon внутри article внутри #study-order зададим размер текста 2em вместо 4em для экранов до 600px. И сразу зададим высоту строки 2.5em. Таким образом мы организуем отступ от верхнего края контейнера. Иначе иконка будет выше, чем заголовок.
Также я бы уменьшил padding для article с 2em до 1em
Отлично.
Дальше проблема у промоблока 2: У второй кнопки текст перенесся на вторую строку.
Решение простое: сделать 1 колонку вместо двух.
Остальное приемлемо.
Размер экрана 320px
Снова контент не поместился.
Длинные слова в заголовках в этапах обучения не влезают. Решение: уменьшить шрифт до 1em.
Заголовок в шапке тоже уменьшить можно. Он разлетелся на несколько строк.
Отступ в шапке теперь тоже стоит уменьшить.
Размер текста в меню тоже стоит уменьшить до 1em. Слова слишком большие.
Теперь с шапкой все нормально.
Блок со списком технологий уже совсем не помещается.
Делаем закономерный вывод: на таком маленьком экране этот блок вообще лучше скрыть.
Соответственно у нас теперь 2 промоблока друг за другом - второй тоже нужно убрать.
Итак, поздравляю. Мы доделали адаптивную верстку.
Теперь наша страница хорошо выглядит на любом экране.
Результат нашей работы можно скачать здесь:
https://github.com/madmaker/srmt-lsn11/archive/refs/tags/v1.zip
Сравните со своим кодом, если что-то работает не так.
Сравнение CSS и SCSS
Мы перешли с вами на SASS, хотя прошлые уроки писали на CSS.
Сейчас CSS генерируется автоматически на основе SCSS.
Посмотрите теперь на наши SCSS файлы. И откройте и посмотрите на запутанное полотно кода в css/general.css - 380 строк кода без какой-либо структуры.
Промежуточные итоги 11 занятий
Подведем промежуточные итоги 11 занятий.
С чем мы познакомились и с чем поработали, получив вполне себе хороший результат:
- HTML - мы на нем пишем сами страницы
- CSS - на нем пишем стили
- SASS (SCSS) - на нем пишем стили удобно
- Linux-серверы - на них мы выкладываем свои страницы
- FTP - с его помощью мы файлы закачиваем на серверы
- Nicepage - на нем мы сделали красивый дизайн сайта
Что делать дальше и как нам помочь?
1. Поставить лайк
2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
3. Подписаться на этот канал
4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
5. Сделать репост этого урока себе в соцсети.
Что будет на следующем занятии?
Научимся делать диалоговые окна и контактные формы.
