@media

[seemax]

Страница имеет разный вид, в зависимости от устройства.

Экран телефона, планшета, десктопа на симуляторе выглядят по сценарию http://quirktools.com/screenfly/#u=http%3A//richel.skepton.ru/&w=320&h=480&a=33&s=1

 

Открывая ссылку на реальном устройстве http://richel.skepton.ru/#  , видим флюид, но не респонсив.

Отображается последний из трёх возможных вариантов + часть свойств вынесенных за скобки условий, относящихся ко всем трём вариантам и не вошедших в данный диапазон.

 @media  screen and (min-width:770px) {   -----some css code-----}

Для уменьшения кода и ускорения загрузки на моб устройствах, прописано сначала всё для мобильников + то, что относится для любого из возможных устройств. После этого для среднего диапазона и для наибольшего.

 

Поделитесь мнением пожалуйста, есть ли необходимость прописывать все свойства для каждого из вариантов, заключая в @media .... {} и может ли в этом быть причина странного поведения?

В таком случае получаем неоднократные повторения кода.

[Sergik+]

В head добавьте <meta content="width=device-width, initial-scale=1.0" name="viewport">

[seemax]

Спасибо большое, работает!