CSSда медиасоровлар kirisi

Экран энига қараб турли-туман кодни ишга тушириш имконини берадиган @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;
}