Мы начинаем с игры с нашим модулем сообщений в блоге, возясь с пробелами. Мы также добавляем маленький цветной квадрат в верхнем левом углу модуля, визуальный индикатор того, что это за контент.
Следующее изменение, которое мы вносим, - это уменьшение некоторых внешних зазоров при более узких размерах экрана. На широких экранах контент имеет ширину 80% (края ширины 10%), но кажется, что лучше использовать 90% на экранах меньшего размера (края шириной 5%).
Мы добавляем небольшой переход, когда выполняется этот медиа-запрос, что может быть действительно забавным дизайнерским трюком. Мне это нравится в этом видео, но со временем это было извлечено из дизайна. Он может быть нестабильным, когда на странице намного больше контента, и он довольно отвлекает.
Мы изменяем нашу сетку, чтобы точка останова была наименьшего размера. Это супер просто, мы просто перестаем перемещать столбцы и делаем их width: 100%;Ура, чтобы не задумываться над сетками! По пути мы решаем некоторые проблемы специфики.
Мы открываем настоящий симулятор iOS, чтобы проверить работу сетки на «реальном» мобильном устройстве. Мы немного пытаемся найти правильный метатег, но в конечном итоге пытаемся найти правильный на CSS-Tricks.com. Оно работает! Но, конечно, у нас есть некоторые проблемы с позиционированием, которые нам нужно решить. Для записи, этот метатег:
Мы возимся с интервалом и размером, пока все не станет нормально. К концу все выглядит довольно хорошо!