Как пользоваться @media?

Question

[Денис]

Как пользоваться media в css? Нужно написать условие: если просмотр сайта с телефона или планшета(в общем экраны меньше стандартных на ПК) - меняется вид сайта. Не могу найти статьи, где все это хорошо описано. Буду благодарен помощи)

Answer 1

[Hello World]

Первая же ссылка тык
и еще

Answer 2

[spafix]

Это самый простой способ,
пишете прямо в css файле:

// все экраны с минимальной шириной 960px и больше
@media (min-width: 960px) {
	// Тут условия для этого размера экрана
    .wrap {
		width: 960px;
	}
}

// все экраны с минимальной шириной 768px и до 959px
@media (min-width: 768px) and (max-width: 959px) {
	// Тут условия для этого размера экрана
    .wrap {
		width: 768px;
	}
}

и такую штуку прописать в head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

[alGustu]

Смотрите тут
Все подробно объясняется