Отзывчивый веб-дизайн
Шрифт:
Так что мы не пойдем этим путем – мы создадим гибкий отступ. Пока что мы использовали относительные единицы измерения только в отношении ширины различных элементов, но мы можем это сделать и с полями и отступами. И воспользуемся для этого нашей проверенной формулой:
Прежде чем мы снова займемся вычислениями, хочу обратить ваше внимание на то, что контексты для гибких полей и для гибких отступов немного отличаются.
1. Задавая гибкие отступы для элемента, принимайте за контекст
2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента. Подумайте о «боксовой» модели, и эти предложения обретут смысл: мы описываем поле в отношении к ширине самого элемента.
Поскольку мы хотим определить поле заголовка, в качестве контекста мы возьмем ширину самого элемента
и переводим результат в:
Наши 48 пикселей поля теперь выражены в относительных единицах измерения, как доля ширины заголовка.
С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка
Рис. 2.21. Взглянув на колонки, мы можем достаточно быстро определить их ширину
Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (
Со статьей (модуль
Помните поле шириной
Рис. 2.22. У заголовка и статьи одинаковые поля
Целевое значение –
Вуаля! Гибкая сетка закончена (рис. 2.23).
Рис. 2.23. Гибкие поля и отступы! Ура!
Немного отрицательных значений
Давайте обратим внимание на заголовок даты записи в блоге.
Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной
Вооружившись этой информацией, напишем небольшой CSS:
Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом (рис. 2.24). А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.
Рис. 2.24. Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)
Мы сможем сделать это при помощи отрицательных отступов, причем нам даже не придется менять принцип действий. Как и прежде, все, что нам нужно, – это определить ширину отступа по отношению к ширине контейнера элемента.
На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель (рис. 2.25). Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:
Рис. 2.25. Необходимо сдвинуть дату влево на 81px (или соответствующий относительный эквивалент)