Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

От пикселей к процентам

.

От пикселей к процентам

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

От пикселей к процентам

Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим

Давайте начнем с первого элемента #page, который содержит наш макет, и попробуем что-нибудь с ним сделать:

#page {

margin: 36рх auto;

width: 960рх;

}

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

#page {

margin: 36рх auto;

width: 90%;

}

Должен признаться, что я пришел к этим 90% без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента #page в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра. И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5%.

Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль . blog. Чуть ранее, когда мы играли с пикселями, то установили следующее правило:

.blog {

margin: 0 auto 53рх;

 width: 900рх;

}

Теперь вместо величины в пикселях мы должны выразить ширину элемента . blog в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула target ÷context = result.

Из оригинал-макета мы знаем, что ширина нашего блога должна составлять 900рх. Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента . blog. Поскольку блок . blog вложен в элемент #page, ширина которого в соответствии с оригинал-макетом составляет 960 пикселей, это и есть наш контекст.

Давайте разделим ширину . blog (900) на его контекст (960):

900 / 960 = 0,9375

У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем 93,75% и заносим их прямо в CSS:

.blog {

margin: 0 auto 53рх;

width: 93,75%;/* 900рх / 960рх */

}

(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины (width). Это, разумеется, дело вкуса, но я нахожу это очень полезным.)

Итак, с двумя элементами мы разобрались. Но что делать с колонками?

.blog .main {

float: left;

width: 566px;

}

.blog .other {

float: right;

width: 331px;

}

Ширина основной колонки, которая расположена слева, составляет 56брх, ширина же левой колонки равна 331рх. Эти цифры нам тоже придется перевести в проценты. Но прежде чем подставить их в формулу, обратите внимание на то, что контекст изменился. Последний раз мы делили ширину модуля .blog на 960, ширину его контейнера (#page). Но поскольку эти блоки вложены в .blog, нам нужно делить целевую ширину колонок (566 и 331) на ширину их нового контекста, то есть ширину .blog (900). В результате мы получаем:

566 / 900 = 0,628888889

331 / 900 = 0,367777778

Передвинув запятую на два знака, мы получаем в итоге

62,8888889% для блока .main и 36,7777778%для блока .other:

.blog .main {

float: left;

width: 62.8888889%;/* 566px / 900px */

}

.blog .other {

float: right;

width: 36.7777778%;/* 331px / 900px */

}

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

.
Читайте так же:

Нам доверяют

Интернет магазин