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