Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
7. Скрити елементи, прозрачности и responsive дизайн

Решение: Responsive сайт

Курсове HTML5 и CSS3 Седмица 7 - Скрити елементи, прозрачности и responsive дизайн
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за responsive решението

Responsive дизайнът се реализира чрез медийни заявки, които променят стила според ширината на екрана. При ширина под 900px менюто преминава в „хамбургер“ бутон, колоните се пренареждат, а съдържанието се адаптира в една или две колони според наличното пространство. Ключът е да контролираме display, float, ширини и подредба така, че сайтът да остане четим и удобен на всяко устройство.

Стъпка по стъпка: как е реализиран адаптивният изглед

  1. Добавена е медийна заявка за екрани под 900px.
  2. Премахнато е запазеното място за дясната колона и aside елементите са променени от inline-block към block, за да се подреждат един под друг.
  3. Навигацията е скрита чрез височина 0, а с ::before псевдоелемент (40x40px) е създадено хамбургер меню с linear-gradient.
  4. Линковете в менюто са направени блокови, с float: right, clear: both, нов padding и text-indent за отстояние.
  5. Добавен е z-index, за да стои менюто над съдържанието.
  6. За таблетен изглед профилната информация е разделена на две колони (float: left, width: 50%), които при по-малък екран се връщат в една колона.
  7. Елементите в таймлайна (датите) са преместени вдясно за по-добра визуална логика.

Използвани CSS техники

  • @media – прилага стилове според ширина на екрана
  • display: block – подрежда елементите един под друг
  • float и clear – контрол на подредбата на колоните
  • ::before – създава хамбургер бутона
  • z-index – определя кой елемент стои най-отгоре

Дискусия към урока