Програмісти не люблять дизайн GUI (графічного інтерфейсу користувача). Таким чином, CSS (Cascade Style Sheet) не є їхньою справою. Я завжди знав, що є проблеми з переглядом на смартфонах/пристроях, де ширина екрана (браузера) мала та вузька. Раніше цей блог був у повному безладі під час перегляду на моєму смартфоні Samsung Gallery S3.
Це тому, що я вибрав шаблон, який найкраще підходить для комп’ютерів із широкими екранами. Я не встиг і не хотів це змінювати, поки не побачив статистику відвідувань у Google Analytic. Очевидно, ця цифра значно зростає для відвідувачів, які приходять зі смартфонів/пристроїв.
WordPress або, можливо, оновлення теми справді значно покращилися. Тепер, якщо ви звузите ширину веб-переглядача, щоб імітувати смартфони, ви побачите, що сторінка не зовсім погана, але вона також не ідеальна та потребує ручних налаштувань.
Отже, що таке адаптивний CSS? Слово адаптивний означає, що, на мою думку, CSS буде налаштовуватися відповідно до різних ситуацій (наприклад, ширина екрана). Ви помітили, що у верхньому лівому куті цієї сторінки є вертикальна панель інструментів із значком. Це виглядає чудово, коли в ширшій ширині, однак, у вузькій ширині, це згортатиметься разом з основним вмістом і створюватиме справді неприємну взаємодію з користувачем. Я вирішив приховати це, коли ширина екрана мала.
Отже, нижче наведено швидку відправну точку для адаптивного CSS.
По суті, наведений вище CSS визначає клас topleft, а другий рядок перевіряє, чи ширина поточної сторінки (браузера, екрана) перевищує 1100 пікселів, якщо ні, то topleft буде перевизначено як прихований.
Щоб використовувати його, просто включіть його таким чином…
Тепер вам навіть не потрібно оновлювати сторінку, CSS реагує миттєво, коли ширина екрана падає нижче 1100 пікселів. Наприклад, якщо ви переглядаєте в iPad і повертаєте на 90 градусів від горизонтальної до вертикальної, код CSS буде реагувати, а значки будуть приховані.