Программистам не нравится дизайн GUI (графический пользовательский интерфейс). Поэтому CSS (каскадная таблица стилей) — не их дело. Я всегда знал, что есть проблемы с просмотром на смартфонах/устройствах, где ширина экрана (браузера) маленькая и узкая. Раньше этот блог был в полном беспорядке при просмотре на моем смартфоне Samsung Gallery S3.
Это потому, что я выбрал шаблон, который лучше всего подходит для настольных компьютеров с более широкими экранами. Я не успел и не хотел его менять, пока не увидел статистику посещений в Google Analytics. Судя по всему, значительно растет число посетителей, приходящих со смартфонов/устройств.
WordPress или, может быть, обновление темы значительно улучшилось. Теперь, если вы уменьшите ширину браузера, чтобы имитировать смартфоны, вы увидите, что страница не совсем плохая, но она также не идеальна и требует ручной настройки.
Итак, что такое адаптивный CSS? Слово «отзывчивый» означает, что, на мой взгляд, CSS будет корректироваться в зависимости от различных ситуаций (например, ширины экрана). Вы заметили, что в верхнем левом углу этой страницы есть значок вертикальной панели инструментов. В более широкой ширине он выглядит нормально, однако в узкой ширине он сворачивается вместе с основным контентом и делает его действительно уродливым для пользователя. Я решаю скрыть это, когда ширина экрана мала.
Итак, ниже приведена быстрая отправная точка для адаптивного CSS.
По сути, приведенный выше CSS определяет класс topleft, а вторая строка проверяет, больше ли ширина текущей страницы (браузера, экрана) 1100 пикселей, если нет, то topleft будет переопределен как скрытый.
Чтобы использовать его, просто включите его вот так…
Теперь вам даже не нужно обновлять страницу, CSS будет реагировать сразу же, когда ширина экрана упадет ниже 1100 пикселей. Например, если вы просматриваете изображение на iPad и поворачиваете его на 90 градусов из альбомной ориентации в вертикальную, код CSS будет реагировать, а значки будут скрыты.