Многим студентам, изучающим адаптивный веб-дизайн, трудно использовать проценты для значений ширины. В частности, существует путаница с тем, как браузер вычисляет эти проценты. Ниже вы найдете подробное объяснение того, как работают проценты для расчета ширины на адаптивном веб-сайте.
Использование пикселей для значений ширины
Когда вы используете пиксели как значение ширины, результаты очень просты. Если вы используете CSS чтобы установить значение ширины элемента в заголовке документа равным 100 пикселей в ширину, этот элемент будет того же размера, что и ширина 100 пикселей в содержимом веб-сайта, нижнем колонтитуле или других областях страницы. Пиксели - это абсолютное значение, поэтому 100 пикселей - это 100 пикселей, независимо от того, где в вашем документе появляется элемент. К сожалению, хотя значения пикселей легко понять, они плохо работают с адаптивными веб-сайтами.
Итан Маркотт придумал термин «Отзывчивый веб-дизайн», объясняя этот подход как содержащий 3 ключевых принципа:
- Жидкая сетка
- Жидкие среды
- Медиа-запросы
Эти первые две точки, плавная сетка и текучая среда достигаются за счет использования процентных значений вместо пикселей для значений размеров.
Использование процентов для значений ширины
Когда вы используете проценты для установки ширины элемента, фактический размер, отображаемый элементом, будет варьироваться в зависимости от того, где он находится в документе. Проценты - это относительное значение, то есть отображаемый размер относительно других элементов в вашем документе.
Например, если вы установите ширину изображение до 50%, это не означает, что изображение будет отображаться с половиной своего обычного размера. Это распространенное заблуждение.
Если изображение на самом деле имеет ширину 600 пикселей, то использование значения CSS для отображения его на уровне 50% не означает, что оно будет иметь ширину 300 пикселей в веб-браузере. Это процентное значение рассчитывается на основе элемента, содержащего это изображение, а не фактического размера самого изображения. Если контейнер (который может быть разделением или каким-либо другим элементом HTML) имеет ширину 1000 пикселей, тогда изображение будет отображаться с разрешением 500 пикселей, поскольку это значение составляет 50% ширины контейнера. Если содержащий элемент имеет ширину 400 пикселей, то изображение будет отображаться только с размером 200 пикселей, поскольку это значение составляет 50% контейнера. Рассматриваемое здесь изображение имеет размер 50%, который полностью зависит от элемента, который его содержит.
Помните, адаптивный дизайн - это гибкость. Макеты и размеры будут меняться по мере того, как изменение размера экрана / устройства. Если вы подумаете об этом с физической точки зрения, а не с точки зрения Интернета, это будет похоже на картонную коробку, которую вы заполняете упаковочным материалом. Если вы говорите, что коробка должна быть наполовину заполнена этим материалом, количество необходимой упаковки будет варьироваться в зависимости от размера коробки. То же самое верно и для процентной ширины в веб-дизайне.
Проценты, основанные на других процентах
В примере изображения / контейнера мы использовали значения пикселей для содержащего элемента, чтобы показать, как будет отображаться отзывчивое изображение. На самом деле, содержащий элемент также будет установлен в процентах, а изображение или другие элементы внутри этого контейнера получат свои значения, основанные на процентах от процента.
Вот еще один пример.
Допустим, у вас есть веб-сайт, на котором весь сайт содержится в разделе с классом «контейнер» (обычная практика веб-дизайна). Внутри этого раздела находятся три других подразделения, которые вы в конечном итоге зададите для отображения в виде трех вертикальных столбцов.
Теперь вы можете использовать CSS, чтобы установить размер этого «контейнерного» раздела, скажем, 90%. В этом примере разделение контейнера не имеет другого элемента, который его окружает, кроме тела, для которого мы не установили какое-либо конкретное значение. По умолчанию тело отображается как 100% окна браузера. Следовательно, процентное соотношение «контейнерного» подразделения будет основано на размере окна браузера. По мере изменения размера окна браузера изменяется и размер этого «контейнера». Таким образом, если окно браузера имеет ширину 2000 пикселей, это разделение будет отображаться на уровне 1800 пикселей. Это рассчитывается как 90 процентов от 2000 (2000 x 0,90 = 1800)), что составляет размер браузера.
Если для каждого из разделов «col», обнаруженных в «контейнере», задан размер 30%, то в этом примере ширина каждого из них будет 540 пикселей. Это рассчитывается как 30% от 1800 пикселей, которые отображает контейнер (1800 x 0,30 = 540). Если бы мы изменили процент этого контейнера, эти внутренние подразделения также изменили бы размер, в котором они отображаются, поскольку они зависят от этого элемента контейнера.
Предположим, что окна браузера по-прежнему имеют ширину 2000 пикселей, но мы изменим процентное значение контейнера на 80% вместо 90%. Это означает, что теперь он будет отображаться с шириной 1600 пикселей (2000 x 0,80 = 1600). Даже если мы не изменим CSS для размера наших 3-х столбцов и оставим их равными 30%, они будут теперь визуализируются по-другому, поскольку их содержащий элемент, который является контекстом, в котором они измеряются, имеет измененный. Эти 3 подразделения теперь будут отображаться с шириной 480 пикселей каждое, что составляет 30% от 1600, или размер контейнера 1600 x 0,30 = 480).
Если пойти еще дальше, если внутри одного из этих разделов «col» было изображение и размер этого изображения был задан в процентах, контекстом для его изменения был бы сам «col». Поскольку это разделение «столбец» изменилось в размере, изменилось и изображение внутри него. Таким образом, если размер браузера или «контейнера» изменится, это повлияет на три подразделения «col», которые, в свою очередь, изменить размер изображения внутри «столбца». Как видите, все это связано, когда дело доходит до процентного расчета. значения.
Когда вы рассматриваете, как будет отображаться элемент внутри веб-страницы, когда для его ширины используется процентное значение, вам необходимо понимать контекст, в котором этот элемент находится в разметке страницы.
В итоге
Проценты играют решающую роль в создании макета для адаптивных веб-сайтов. Независимо от того, изменяете ли вы размер изображений или используете процентную ширину, чтобы создать действительно плавную сетку, размеры которой относительно друг друга, понимание этих расчетов будет необходимо, чтобы добиться того, что вы желание.