Резиновый шрифт css


Публикация статьи «Умные динамические колонки с применением CSS и jQuery» стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта.

Задача — реализовать динамическое изменение размера шрифта сайта в зависимости от разрешения экрана, т.е. размера окна браузера.

Прежде чем приступить к описанию решения, хочу обозначить два момента:

  1. Лично для меня полезность данной штуки весьма сомнительна, и я скорее бы рассматривал такую возможность просто в качестве ознакомления. А вот Сергей, например, эту технику давно хотел применить на практике и видит в ней смысл. Поэтому, возможно, кому-нибудь еще эта информация также пригодится.
  2. Решение довольно простое, работает на моем любимом jQuery, но использование этого фреймворка только ради осуществления данной задачи — не очень разумно, поскольку один лишь фреймворк «весит» под 60 Кб, а сам скрипт при этом состоит из всего лишь 10 строк. Я полагаю, что на нативном JavaScript скрипт, реализующий то же самое, будет значительно меньшего размера.

Итак, приступим.

Сначала я подробно опишу работу jQuery-скрипта, а затем объясню, как его применить к той или иной части веб-сайта.

jQuery

За точку отсчета я взял ширину в 1000 пикселей. Как правило, это минимальная ширина, под которую верстаются сайты. Заносим этот показатель в переменную:

Теперь устанавливаем минимальный размер шрифта в пикселях, ниже которого он не будет уменьшаться:

Далее считываем ширину хтмл-документа, которую также заносим в переменную:

Определяем коэффициент, на который будет умножаться базовый (минимальный) размер шрифта в зависимости от размера окна браузера. Цифру получаем путем деления ширины хтмл-документа на базовую (минимальную) ширину. Т.е., к примеру, если ширина окна браузера составляет 1600 пикселей, то получим коэффициент 1,6.

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

Теперь полученный скорректированный размер шрифта применяем к тегу <body>:

Все вышеописанные строки помещаем в функцию function fontSize() {}, затем запускаем эту функцию после загрузки хтмл-документа, а также после изменения размера окна браузера:

Вот целиком код jQuery-скрипта, который получился у нас в итоге:


HTML

Рассмотрим применение вышеуказанного скрипта на примере 3-колоночного макета страницы, имеющего следующую структуру HTML-кода:

CSS

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

Все очень просто.

Во-первых, правой колонке мы просто-напросто устанавливаем свой фиксированный размер шрифта и высоту строки, и скрипт его не затронет:

Во-вторых, левой колонке ставим чуть меньший размер шрифта:

В-третьих, нужно либо у тега <body>, либо у соответствующего блока указать высоту строки в em, чтобы она тоже изменялась динамически.

Вот, в принципе, и все.

Пример динамического изменения размера шрифта на jQuery

Если вы хотите менять размер шрифта только у конкретного блока, допустим, у #content, тогда будет логичнее в скрипте поменять body (в строке $('body').css({fontSize: fontSize+'px'});) на нужный идентификатор или класс.

dimox.name

Обзор единиц измерения

Единицы измерения можно разделить на две категории: абсолютные и относительные.


Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.

Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.

Вот краткий обзор некоторых единиц измерения:

Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px, pt, %, em, rem и vw.

Какая между ними разница?

Разницу между этими единицами измерения трудно понять теоретически, так что лучше продемонстрировать ее на конкретных примерах увеличения размера шрифта HTML.

Пример 1 — Настройки по умолчанию

В HTML-документе, где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:

100% = 1em = 1rem = 16px = 12pt

Это означает, что, если вы установите размер шрифта для одного блока <р> в 100%, а для другого — 16px, на экране они будут выводиться с одним и тем же размером шрифта:

Пример 2 — Абсолютные и относительные единицы измерения

Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html { font-size: 200% }, это повлияет только на блоки <р> с размером шрифта, заданным в относительных единицах:


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

Пример 3 — rem и em (и %)

Единицы измерения em (и %) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.

Например:

Поскольку р является дочерним элементом body, который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML:

При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.

Решением данной проблемы является rem. Он рассчитывается только на основе размера шрифта элемента html, а не родительского элемента.

Например:

Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.

Пример 4 — Размеры шрифта на основе ширины окна просмотра

vw — это новая единица измерения CSS3, которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.

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


Мой метод

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

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

Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта):

Это позволяет мне изменять размеры шрифтов с помощью следующего кода:

Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.

Перевод статьи «CSS Font Sizing» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Что делать дальше?

Отлично, от этого мы и будем плясать. Смотрите в макет на размеры шрифтов и задаете их не в пикселях, а в em


. Расчет такой: 1em = 16px и 1em = 100%.

Например, заголовкам нужно задать размер шрифта 30 пикселей. Хорошо, берем калькулятор и делим 30 на 16. Получается 1,875. Теперь остается только прописать это в стилях:

selector{  font-size: 1,875em; }

Или какой-то подсказке в форме, например, нужно задать размер текста 9 пикселей:
9/16 = 0,5625 em.

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

Все, на этом вся фишка. Надеюсь, кому-нибудь была полезна и пригодится при верстке.

dolinacoda.ru

Коротко о viewport-зависимых единицах

100vw равно ширине (100vh — высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc()). 100vmax — равно большему из пары высота/ширина, 100vmin — меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.


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

Задача

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px, а при 1280px24px.

Путь к решению

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

На оси X — ширина окна браузера, на оси Y — наш размер шрифта. Получаем уравнение с двумя неизвестными:

откуда

y — наш неизвестный размер шрифта, x — текущий размер экрана. x1 — минимальное значение шрифта, x2 — максимальное значение шрифта. y1 и y2 минимальное и максимальные значение ширины экрана соответственно.

А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:

font-size: calc( (100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);  

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):

font-size: calc( (100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem:

font-size: calc( (100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);

Используем Sass/SCSS

Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

Получим функцию:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) {  $k: ($f-max - $f-min)/($v-max - $v-min);  $b: $f-min - $k * $v-min;   $b: $b * 1px;   @return calc( #{$k} * 100vw + #{$b} ); } .fluid-font-size {  font-size: calcFluidFontSize(16, 48, 480, 1280); }  

В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) {  $k: ($f-max - $f-min)/($v-max - $v-min);  $b: $f-min - $k * $v-min;   $b: $b + $units;   @return calc( #{$k} * 100vw + #{$b} ); }  .fluid-font-size {  font-size: calcFluidFontSize(1, 3, 30, 80, rem); }

Для защиты от неверно введенных данных, можно обрезать единицы измерений при получении данных. Для этого можно использовать функцию strip-unit или взять ее из библиотеки bourbon:

@function strip-unit($number) {  @if type-of($number) == 'number' and not unitless($number) {  @return $number / ($number * 0 + 1);  }   @return $number; }  @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) {  $f-min: strip-unit($f-min);  $f-max: strip-unit($f-max);  $w-min: strip-unit($w-min);  $w-max: strip-unit($w-max);   $k: ($f-max - $f-min)/($w-max - $w-min);  $b: $f-min - $k * $w-min;   $b: $b + $units;   @return calc( #{$k} * 100vw + #{$b} ); }  

Расширяем возможности нашей функции

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

Например, мы хотим фолбек для старых браузеров:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) {  @if ($fallback) {  font-size: $fallback;  }  font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px);  }  .fluid-font-size {  @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

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

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) {   font-size: $f-min;   @media (min-width: $w-min) {  @if ($fallback) {  font-size: $fallback;  }  font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px);   }  @media (min-width: $w-max) {  font-size: $f-max;  } }  .fluid-font-size {  @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) {  $f-min: strip-unit($f-min);  $f-max: strip-unit($f-max);  $w-min: strip-unit($w-min);  $w-max: strip-unit($w-max);   $k: ($f-max - $f-min)/($w-max - $w-min);  $b: $f-min - $k * $w-min;   $b: $b + $units;   @return calc( #{$k} * 100vw + #{$b} ); }

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

habr.com

Резиновый веб-дизайн с HTML5 и CSS3 позволяет нам создавать веб-страницы, которые способны адаптироваться согласно ширины окна браузера. HTML5, CSS3, JS позволяет более быстро превратить ваш сайт в резиновую модель.

Для создания резиновых веб-страниц, мы должны знать, как работать с: резиновым макетом, резиновой шириной, резиновыми: текст и изображения, видео и ифреймы, резиновые: margin и padding, таблицы и формы, адаптивное меню.

Методы верстки резиновых веб-страниц.

Основной идеей для создания резинового макета с HTML5 и CSS3 является определение размеров элементов страницы в процентах или EMs, что позволяет элементам веб-сайта атоматически изменять размер в соответствии с размером окна браузера.

Для создания резинового макета используется формула: target ÷ context = result

  • target — размер шрифта(или ширины) которые мы имеем в пикселях(ширина рассчитывается в % и размер в em)
  • context — размер шрифта, если он не задан для body то можно к примеру использовать тот который установлен по умолчанию(для Mozilla это 16px).
  • result — результат который мы получим в em или %

 В общем, преобразования размера элемента с пикселей в проценты или EMs делается относительно его родительского элемента, смотрите примеры:

body{font: 13px/18px Arial;}  header{   background: >#252525;   padding: 1.5625%; /* 15px/960px*100 = 1.5625% */   max-width:960px; width:100%;  }   header h1{   font-size:1.384615384615385em; /* 18px/13px = 1.384615384615385em */  line-height:1.111111111111111em; /* 20px/18px = 1.111111111111111em */  }

В данном примере видим что при условии если мы хотим сделать размер текста для header h1 font-size: 18px; и line-height: 20px; нам необходимо расчитать размер в EM согласно его родительского элемента, то есть body: font-size: 13px; line-height: 18px; в резултате получаем font-size:1.384615384615385em; и line-height:1.111111111111111em;

Резиновые: макет, ширина, margin и padding.

Создаём section, где мы расположим два asides:

section.content-columns{   padding: 1em;   max-width: 83em;   min-width: 20em;   margin: 0 auto;} aside.content-column-left{   clear: left;   float: left;   padding: 1%;   width: 47%;} aside.content-column-right {   float: left;   padding: 1%;   width: 47%;}

В этом примере вы видите, что у нас есть section с максимальной шириной: 83em эквивалентной 1328px и внутри мы имеем два блока каждый с шириной: 47%, и если мы изменяем размер экрана браузера наши внутренние блоки всегда будут иметь ширину: 47% и padding: 1%

Текст и изображения в резиновой верстке

Этот метод CSS позволяет изменять размер изображения автоматически в соответствии с размером экрана, текст каждого элемента на веб-сайте может быть задан персонально, так как для всего документа задан размер шрифта font-size:100%.

body{   font: normal 100% "Trebuchet MS", Arial, Helvetica, sans-serif;  } p {   font-family: Arial, Helvetica, sans-serif;   font-size: 1em; /* 16px / 16px = 1em*/  } img {   border: none;   outline: none;   max-width: 100%;   height: auto !important;}   Видео и ифреймы. embed, object, video {   max-width: 100%;   height: auto;}

Резиновый дизайн: формы, таблицы, меню

Пример адаптивной контактной формы.

Html:

<form action="#" id="contact-form" method="post">  <label for="name">Name:<span class="any">*</span></label>  <input class="required" id="name" name="name" type="text" />  <label for="email">Email:<span class="any">*</span></label>  <input class="required" id="email" name="email" type="email" />  <label for="url">Website:</label> <input id="url" name="url" type="url" />  <label for="subject">Subject:<span class="any">*</span></label>  <input class="required" id="subject" name="subject" type="text" />  <label for="message">Message:<span class="any">*</span></label>  <textarea class="required" cols="50" id="message" name="message" rows="5">  </textarea><a class="readmore" ="#">Send Message</a>  </form>

CSS:

#contact-form{ margin: 0 10px; padding: 0 7px;} label{display:block;} input[type="text"],  input[type="password"],  input[type="email"],  input[type="url"],  textarea, select{   width: 100%;   padding: 5px;   margin: 10px;   font-size:0.9em;}  

Для создания таблиц и меню у нас есть две возможности: первая заключается в использовании JS(JQuery), и вторая с помощью Media Queries заточить свой сайт под свои нужды.

Создать резиновую таблицу можно следующим способом:

HTML

<table width="100%" border="0">   <caption>   Our Tasks   </caption>   <thead>   <tr>   <th scope="col">Title</th>   <th scope="col">Year</th>   <th scope="col">Satisfaction</th>   <th scope="col">Price</th>   <th scope="col">Review</th>   <th scope="col">Commits</th>   <th scope="col">Errors</th>   </tr>   </thead>   <tbody>   <tr>   <td>Design</td>   <td>2013</td>   <td>Good</td>   <td>€1000</td>   <td>Past</td>   <td> - </td>   <td>No errors</td>   </tr>   <tr>   <td>Web Design</td>   <td>2013</td>   <td>Very Good</td>   <td>€1200</td>   <td>Past</td>   <td> + </td>   <td>Need review</td>   </tr>   <tr>   <td>Programing</td>   <td>2013</td>   <td>Awesome</td>   <td>€4000</td>   <td>Future</td>   <td> + </td>   <td>Resolved</td>   </tr>   <tr>   <td>Seo Optimization</td>   <td>2013</td>   <td>Need review</td>   <td>€50000</td>   <td>Future</td>   <td> - </td>   <td>Resolved</td>   </tr>   </tbody>   </table>

CSS

@charset "utf-8";  /* CSS Document */ /* HTML5 Doctor Reset */  article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {   display: block;  } html{   overflow-x:hidden;} body{   font-family: Arial, Helvetica, sans-serif;   font-size: 93%;} table {   border-collapse: collapse;   max-width:1200px;   margin:20px auto;  } table th{   border:2px solid #666;} table caption {   color: #365365;   text-align: left;   font:italic 1.3em/1.5em "chaparral-pro",Georgia,"Times New Roman",Times,serif;   padding: 1em 0 0 0;   margin-bottom: .5em;  } table td {   border: 1px solid #999;   padding: 0.25em  } table td:nth-child(even) {   text-align: center;  }   /* Mobile width < 600px*/ @media (max-width: 600px) {  table, thead, tbody, th, td, tr, caption {   display: block;  }  thead tr {   display: none;  }  #mainContent table tr:nth-of-type(even) {   background-color: rgba(102,51,121,.25)  }  td {   border: none;   position: relative;   text-align: center;  }  td:before {   position: absolute;   top: 6px;   left: 6px;   width: 45%;   padding-right: 10px;   white-space: nowrap;   text-align: left;  }  /* Label the data */  td:nth-of-type(1):before {   content: "Title:";   color: red;   font-weight:bold;  } td:nth-of-type(2):before {   content: "Year:";  }  td:nth-of-type(3):before {   content: "Satisfaction:";  }  td:nth-of-type(4):before {   content: "Price:";} td:nth-of-type(5):before {   content: "Review:";  } td:nth-of-type(6):before {   content: "Commits:";   } td:nth-of-type(7):before {   content: "Errors:";  }  }

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

С HTML5 и CSS3 мы имеем больше шансов для создания резиновых веб-страниц. Использование Media Queries которые поддерживаются всеми новыми браузерами и если мы хотим чтобы IE 6-8 также мог поддерживать Media Queries мы можем добавить js-скрипт respond.js для Drupal(работает только при включенной опции Объединение и сжатие файлов CSS) или загрузить с GitHub для использования с различными CMS respond.js. Медиа-запросы позволяют при помощи простых деклараций CSS в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:

@media screen and (max-width: 600px){  #art_gallery{  width:100%;}  }

Эта декларация определяет, что при уменьшении экрана браузера менее 600px DIV с ID#art_gallery эквивалентен ширине 100%.

 

Кроссбраузерность резинового(отзывчивого) веб-дизайна

Позиционирование элементов для Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari

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

Пример 1: значение margin-top: 2.01em; для какого либо элемента веб-страницы будет отображать данный элемент одинаково во всех браузерах, но если задать margin-top: 2em; то в Mozilla Firefox мы увидим что позиционирование отличается от того как будет расположен данный элемент в Internet Explorer, Google Chrome, Opera, Safari

Пример 2: значение line-height: 27.3px; для шрифта кнопок во всех браузерах отображается одинаково, но если задать line-height: 27px; то в Internet Explorer мы увидим незначительную разницу с тем как данное значение срабатывает в Google Chrome, Mozilla Firefox, Opera, Safari

 

Шрифты для стандартного отображения в различных браузерах

Для всех версий браузера Internet Explorer от компании Microsoft можно использовать следующие шрифты семейства Sans-serif: Calibri, Candara, Corbel, Cambria, Constantia.

Для Mac OS и её предшественников наиболее совместимы Monaco, Geneva, Myriad, Skia, но последняя версия Safari поддерживает практически все шрифты

Для unix/linux могут быть использованны DejaVu Sans, DejaVu Serif, DejaVu Sans Mono, Garuda, но не стоит забывать что все браузеры любой операционной системы поддерживают все стандартные шрифты как: Arial, Verdana, Tahoma и т.д

Оптимальный размер шрифта может быть задан между 93% и 97%

artinblog.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.