Добрый день!
Возникла проблема: при просмотре сайта на экране с разрешением меньше стандартного (стандартным принят размер 1200px) временами происходит дергание блоков.
Причина - использование стилей. При разрешении экрана от 1200 px и более используются стили styles.css при разрешении экрана менее 1200 px применяются стили @media.css.
Получается, что на маленьких экранах при обновлении страницы или при клике по пункту меню вначале происходит загрузка стилей styles.css и лишь за тем @media.css, в итоге, происходит небольшое подергивание блоков.
Как можно решить эту проблему?
Styles.css - набор стилей по умолчанию, для стандартных экранов.
@media.css - набор классов, рассчитанных под адаптацию для экранов различного разрешения.
main.css - хранит информацию для настройки css3 анимации одного из блоков подгружаемой страницы main.html.
Порядок подключения стилей на главную страницу index.html следующий:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/@media.css" rel="stylesheet">
Ошибка отображена на скринах.
Адрес сайта: hexamech.ru
