Процент для вычислений ширины в ответном месте

Многим учащимся гибкого веб-дизайна приходится сложное время, используя проценты для значений ширины. В частности, существует путаница в том, как браузер вычисляет эти проценты. Ниже вы найдете подробное объяснение того, как проценты работают для вычислений ширины на быстродействующем веб-сайте.

Использование пикселей для значений ширины

Когда вы используете пиксели в качестве значения ширины, результаты очень просты. Если вы используете CSS для установки значения ширины элемента в заголовке документа на 100 пикселей в ширину, этот элемент будет такого же размера, как тот, который вы установили на уровне 100 пикселей в содержимом или нижнем колонтитуле сайта или в других областях стр. Пиксели являются абсолютным значением, поэтому 100 пикселей - 100 пикселей независимо от того, где в вашем документе появляется элемент. К сожалению, хотя значения пикселей легко понять, они не очень хорошо работают с отзывчивыми веб-сайтами.

Этан Маркотт придумал термин «отзывчивый веб-дизайн», объяснив этот подход как содержащий 3 ключевых принципала:

Жидкая сетка
Жидкие среды
Запросы СМИ

Эти первые две точки, жидкостная сетка и жидкая среда достигаются путем использования процентов, а не пикселей, для значений размеров.

Использование процентных значений для значений ширины

Когда вы используете проценты для установки ширины элемента, фактический размер, отображаемый этим элементом, зависит от того, где он находится в документе. Проценты представляют собой относительное значение, то есть отображаемый размер относится к другим элементам вашего документа.

Например, если вы установите ширину изображения на 50%, это не означает, что изображение будет отображаться на половине его нормального размера. Это распространенное заблуждение.

Если изображение имеет ширину 600 пикселей, то использование значения CSS для отображения его на уровне 50% не означает, что он будет иметь ширину 300 пикселей в веб-браузере. Это процентное значение вычисляется на основе элемента, который содержит это изображение, а не собственного размера самого изображения. Если контейнер (который может быть разделом или каким-либо другим элементом HTML) имеет ширину 1000 пикселей, тогда изображение будет отображаться на 500 пикселей, так как это значение составляет 50% от ширины контейнера. Если содержащий элемент имеет ширину 400 пикселей, изображение будет отображаться только на 200 пикселей, так как это значение составляет 50% от контейнера. Образ, который здесь задан, имеет размер 50%, который полностью зависит от элемента, который его содержит.

Помните, отзывчивый дизайн - это жидкость. Макеты и размеры будут меняться по мере изменения размера экрана / устройства. Если вы думаете об этом в физических, не-веб-терминах, это похоже на картонный ящик, который вы заполняете упаковочным материалом. Если вы говорите, что коробка должна быть наполовину заполнена этим материалом, количество упаковки, которое вам нужно, будет варьироваться в зависимости от размера коробки. То же самое справедливо и для процентной ширины в веб-дизайне.

Проценты на основе других процентов

В примере с изображением / контейнером мы использовали значения пикселей для содержащего элемента, чтобы показать, как будет отображаться отзывчивое изображение. В действительности, содержащий элемент также будет установлен как процент, а изображение или другие элементы внутри этого контейнера будут получать свои значения на основе процента от процента.

Вот еще один пример, который показывает это на практике.

Скажем, у вас есть сайт, на котором весь сайт содержится в подразделении с классом «контейнер» (обычная практика веб-дизайна). Внутри этого подразделения находятся три других деления, которые в конечном итоге вы будете отображать в виде трех вертикальных столбцов. Этот HTML-код может выглядеть так:

Теперь вы можете использовать CSS, чтобы установить размер этого «контейнерного» деления, чтобы сказать 90%. В этом примере разделение контейнера не содержит другого элемента, который окружает его, кроме тела, который мы не установили для какого-либо определенного значения. По умолчанию тело будет отображаться как 100% окна браузера. Таким образом, процент «контейнерного» подразделения будет основываться на размере окна браузера. По мере изменения размера окна браузера размер этого «контейнера». Поэтому, если окно браузера имеет ширину 2000 пикселей, это разделение будет отображаться с разрешением 1800 пикселей. Это вычисляется как 90 процентов 2000 (2000 x .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 х 0,30 = 480).

Принимая это еще дальше, если в одном из этих разделов «col» было изображение, и размер изображения был определен с использованием процента, контекст для его калибровки был бы «col».Поскольку это разделение «col» изменилось по размеру, так и изображение внутри него. Поэтому, если размер браузера или «контейнер» изменился, это повлияет на три «col» -разделения, которые, в свою очередь, изменят размер изображения внутри «col». Как вы можете видеть, все это подключается, когда речь идет о значениях прогона в процентах.

Когда вы рассматриваете, как элемент внутри веб-страницы будет отображаться, когда процентное значение используется для его ширины, вам нужно понять контекст, в котором этот элемент находится в разметке страницы.

В итоге

Проценты играют критическую роль в создании макета для сайтов с учетом интересов. Независимо от того, изменяете ли вы изображения изображениями или используете процентную ширину, чтобы создать действительно гибкую сетку, размеры которой относительно друг друга, понимание этих вычислений будет необходимо для достижения желаемого вами вида.