Сьогодні робив таблицю для одного сайту, яка виводила в онлайні результат матчу, з автооновлення. Після завершення проекту, вирішив протестувати його на маленькому екрані, і був дуже незадоволений результатом.
По-перше, таблиця не вся вміщається в екран, доводиться прокручувати кожен раз сторінку.
По-друге, занадто великі шрифти в різних частинах таблиці.
Проблему довелося вирішити підключенням декількох файлів стилів сайту під різний дозвіл (* .css) для різних дозволів.
Як це зробити?
А зробити це зовсім не важко. Просто визначаємо дозвіл екрана через яваскрипт і підключаємо потрібний файл стилю.
Для початку всередині тега head, в самому кінці, додамо рядки
Тепер можна створити копію файлу main.css і перейменувати її в main1024.css. Тепер в цьому файлі стилів можна змінити всі елементи font-size на менше, наприклад, на 1 пункт. Також потрібно змінити розміри зображень параметрами width і height.
Таким способом можна підключити для різних дозволів екрану, різні css файли.
Приклад підключення файлів стилів
Ось тут обговорювалося як відловлювати зміна масштабу.
Без скриптів? А навіщо? Може ще й без картинок сайти будемо робити? Важлива була швидкість реалізації, а не краса коду. Стилі були вже зовсім різні в моєму проекті. Для повноцінного сайту звичайно ж краще використовувати адаптивну верстку.