@media min и max width

[Tobey]

Доброго всем!

Сделал небольшой примерчик: http://almostman.ru/main/

Задумка такова:

1) При размерах экрана меньше 270px выдавать сообщение о невозможности отображения странички. думаю сделать это с помощью JS чуть позже.

2) При размерах экрана от 270 до 595 px показывать отцентрированные изображения друг за дружкой.

3) При размерах экрана от 596 до 870 px показывать изображения смещённые float-ом влево, по две штуки в ряд.

 

Когда ставлю размер 270, всё нормально. Когда ставлю 595-597, изменений нету, они стоят, как стояли при условии (2). Если поставить @media (min-width587px) and ...

то всё какбы срабатывает, но получатся он берёт сразу стили из двух @media и margin по вертикали в два раза больше необходимого.

[WEB-best]

"При размерах экрана меньше 270px выдавать сообщение о невозможности отображения странички. думаю сделать это с помощью JS чуть позже."
Идиотизм

[npofopr]

У меня всё работает. 

И js уж точно не стоит использовать, проще всему указывать display: none;

[Tobey]

Немного поправил, доступно по линку http://almostman.ru/main/main/.

Добавил класс .wrapper, для центровки изображений. Также добавил все размеры экранов, которые мне необходимы.

Но работает, опять не так как хотелось бы.

1) Когда ширина 298-595 margin по вертикали между двумя блоками 14px вместо 28px.

2) В районе 600px центровка перестаёт работать и изображения смещаются влево.

3) Когда больше 1184 показывает не 4 изображения в ряд, а три.

Edited July 29, 2014 by Tobey

[Sergik+]

Немного поправил, доступно по линку http://almostman.ru/main/main/.

Добавил класс .wrapper, для центровки изображений. Также добавил все размеры экранов, которые мне необходимы.

Но работает, опять не так как хотелось бы.

1) Когда ширина 298-595 margin по вертикали между двумя блоками 14px вместо 28px.

2) В районе 600px центровка перестаёт работать и изображения смещаются влево.

3) Когда больше 1184 показывает не 4 изображения в ряд, а три.

3) У меня 4 показывает.