Сегодня делал таблицу для одного сайта, которая выводила в онлайне результат матча, с автообновлением. После завершения проекта, решил протестировать его на маленьком экране, и был очень не доволен результатом.

Во-первых, таблица не вся вмещается в экран, приходится прокручивать каждый раз страничку.

Во-вторых, слишком большый шрифты в разных частях таблицы.

Проблему пришлось решить подключением нескольких файлов стилей сайта под разное разрешение (*.css) для разных разрешений.

А сделать это совсем не трудно. Просто определяем разрешение экрана через ЯваСкрипт и подключаем нужный файл стиля.

Для начала внутри тега head, в самом конце, добавим строки

{ //При ширине экрана < 1280 if (screen.width < 1280) document.write (""); //иначе else document.write (""); }

Теперь можно создать копию файла main.css и переименовать ее в main1024.css . Теперь в этом файле стилей можно изменить все элементы font-size на меньше, например, на 1 пункт. Также нужно изменить размеры изображений параметрами width и height .

Таким способом можно подключить для разных разрешений экрана, разные css файлы.

Пример подключения файлов стилей

{ if (screen.width