Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Медийни заявки

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

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

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

Медийни заявки – ключът към responsive дизайна

Медийните заявки (Media Queries) ни позволяват да променяме стила на страницата според размера на екрана. Те решават проблема с неправилното визуализиране на сайтa при малки устройства като мобилни телефони. Най-важното: можем да зададем различни CSS правила, които се активират само при определена ширина на екрана. Това е основата на responsive дизайна.

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

Отворете вашия CSS файл.
В края на файла добавете медийна заявка, която започва с @media.
Задайте условие за максимална ширина, например 600 пиксела.
Вътре във фигурните скоби добавете стилове, които да се прилагат при тази ширина.
Тествайте, като намалявате ширината на браузъра.

Примерна логика: когато ширината стане по-малка или равна на 600px, се активират новите стилове (например промяна на фона).

Основни CSS елементи в този урок

@media – дефинира медийна заявка
max-width – задава максимална ширина, при която правилата ще се приложат
body – селекторът, към който могат да се приложат нови стилове
background-color – променя цвета на фона

Медийните заявки дават контрол върху това как изглежда сайтът на различни устройства и са задължителна част от модерната уеб разработка.

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

Въпроси

Отговори

26371765

Защо не се появява синия цвят?

Петър

Защо къдравите скоби се поставят в отделен ред и то в началото, само за прегледност ли?