Вовед во медија-записи во CSS

Постои специјална команда @media, која овозможува извршување на различен код во зависност од ширината на екранот.

Во следниот пример одреден код ќе се активира, ако ширината на екранот е од 300px до 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* одреден код */
}

Во следниот пример одреден код ќе се активира, ако ширината на екранот е поголема од 300px:

@media (min-width: 300px) {
	/* одреден код */
}

Во следниот пример одреден код ќе се активира, ако ширината на екранот е помала од 1200px:

@media (max-width: 1200px) {
	/* одреден код */
}

Ајде да напишеме во нашиот медија-запис некаков код. На пример, при одредени димензии на екранот да ги обоим параграфите во црвена боја:

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

А сега да ги обоим параграфите во различни бои во зависност од ширината на екранот:

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

Нека следниот код се примени на екран со ширина од 0 до 800px:

p {
	font-size: 20px;
}

А следниот код нека се примени на екран со ширина од 800px и повеќе:

p {
	font-size: 30px;
}

Нека следниот код се примени на екран со ширина од 0 до 500px:

p {
	font-size: 15px;
}

Следниот код нека се примени на екран со ширина од 500px до 900px:

p {
	font-size: 20px;
}

Следниот код нека се примени на екран со ширина од 900px и повеќе:

p {
	font-size: 30px;
}