Не работают media запросы при уменьшении экрана?

Question

[0_ficus_0]

@media (max-width: 320px) {
	
}

@media (max-width: 480px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 992px) {
	
}

@media (max-width: 1200px) {
	.top-mnu 
		.a
			font-size: 15px;
	.top-phone 
		.li 
			.a
				font-size: 20px;
}

Comments

[ⓒⓢⓢ]

В описании у тебя блоки с media запросами пустые - нет в них css правил
отредактируй и нормально покажи проблемный участок, покажи что где и как подключается

Answer 1

[Stalker_RED]

работают https://jsfiddle.net/zm0on8y3/show/

Comments

[0_ficus_0]

Может я не правильно подключил? Они у меня в css файле

[0_ficus_0]

Все, что связывает эти файлы

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

<link rel="stylesheet" href="css/media.css" />

[0_ficus_0]

Я посмотрел исходный код того что ты мне скинул, там совершенно всё другое.

[Stalker_RED]

0_ficus_0, печалька. А так понятнее?
https://jsfiddle.net/zm0on8y3 (та-же ссылка без слова show в конце)

[0_ficus_0]

Stalker_RED, Не понятно

[Stalker_RED]

0_ficus_0, начать с основ css, или что-то именно о медазапросах объяснить? Вы же видите, что в моем примере при смене ширины цвет меняется.

У вас в коде все правила кроме последнего ПУСТЫЕ. Чего вы ожидали от них?

Answer 2

[doweb]

Может быть проблема в синтаксисе?
Если при работе с селектором не используются фигурные скобки {}, то и при медиа-запросов их не надо ставить?

Попробуйте так:

@media (max-width: 1200px)
  .top-mnu 
    .a
      font-size: 15px;
  .top-phone 
    .li 
      .a
        font-size: 20px;

Comments

[0_ficus_0]

Я так тоже пробовал, не выходит ничего

[Stalker_RED]

о_О

Answer 3

[Ольга Ветер]

так у вас последний @media будет действовать на все экраны мельче 1200px в ширину и будет перебивать все предыдущие написанные вами @media. Либо поменяйте их порядок, от большего к меньшему, либо перепишите @media под min-width

Ну и про скобки вам тоже верно написали. Если используете синтаксис без скобок, тут их тоже не должно быть

Answer 4

[Chaly95]

Попробуйте так

@media screen and (max-width: 320px) {
   тут код
}