HTML5 — округление чисел

Некоторые критики методологии адаптивного веб-дизайна (например, загляните на страницу по адресу http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/) утверждают, что вводить в таблицы стилей числа вроде.550724638em просто глупо. Вы можете задаться вопросом: «Почему бы не округлять такие числа до более удобных для восприятия?»

Контраргумент заключается в том, что такие числа являются более точными ответами на задаваемые вопросы. Если предоставить браузеру наиболее точный ответ, он сможет отобразить этот ответ в наиболее точной форме. Если в школе вы бодрствовали более чем на двух уроках математики, то, я уверен, слышали о золотом сечении (http://en. wikipedia. org/wiki/ Golden_ratio). Это математическое отношение, которое встречается и используется почти в каждой из известных нам дисциплин и выражается примерно как 1:1,61803398874989 (если вы хотите узнать, какие 10 000 десятичных знаков следуют после запятой в данной пропорции, то загляните по адресу http://www.maths.surrey. ac. Uk/hosted-sites/R. Knott/Fibonacci/ phi10000dps. txt). Этот показатель никоим образом нельзя назвать лаконичным, однако он весьма важен. Если в случае с золотым сечением допускаются столь точные измерения, то я склонен полагать, что это возможно и в создаваемых нами дизайнах.

Все по-прежнему отлично выглядит в области просмотра с теми же размерами, что и раньше. Однако навигационная область ведет себя не так, как следует. Если немного увеличить размеры области просмотра, то ссылки будут занимать уже две строки (рисунок 3.3).

При увеличении области просмотра ссылки переносятся на новую строку

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

#navigation { padding-bottom: 25px; margin-top: 26px;

Margin-left: -1.0416667%; /* 10 х 960 */ padding-right: 1.0416667%; /* 10 х 960 */ padding-left: 1.0416667%; /* 10 х 960 */ width: 97.9166667%; /* 940 х 960 */ background-repeat: repeat-x; background-image: url(../img/atwiNavBg. png); border-bottom-color: #bfbfbf;

Border-bottom-style: double; border-bottom-width: 4px;

}

#navigation ul li {

Display: inline-block;

}

#navigation ul li a { height: 42px; line-height: 42px; margin-right: 25px; text-decoration: none; text-transform: uppercase;

Font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black;

}

Похоже, в нашем третьем правиле #navigation ul li по-прежнему задано поле с использованием пиксельного значения, которое в данном случае равно 25. Исправим это, прибегнув к нашей проверенной формуле. Поскольку элемент <div> с идентификатором #navigation имеет ширину 940 пикселов, результат будет равен 2.6595745%. Таким образом, мы изменим правило так, как показано далее:

#navigation ul li a { height: 42px; line-height: 42px;

Margin-right: 2.6595745%; /* 25х940 */

Text-decoration: none; text-transform: uppercase;

Font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 27px; color: black;

}

Это было довольно просто! Теперь проверим, все ли хорошо выглядит в браузере (рисунок 3.4).

Страница после изменения ширины правого поля

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