Использование em в отзывчивом дизайне

Question

Я создал отзывчивый сайт и хочу использовать em для управления размером шрифта.

Я установил размер базового шрифта для тела до 64,5%, как рекомендовано, чтобы создать базу 10px.

Однако, хотя размер изображения выглядит нормально, он не изменяется с размером браузера. Что мне не хватает?

http://jsfiddle.net/XaUz9/

Answer 1

Смотрите, если это поможет вам: http://jsfiddle.net/panchroma/qK8j2/

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

Установка
body{ font-size:62.5%; } просто устанавливает размер шрифта (относительно настройки браузеров по умолчанию), это не приведет к каким-либо масштабирования.

Несколько способов добиться того, что вы хотите, чтобы либо установить размеры для h1, h2, р и т.д., как изменения viepoint с использованием @media queries, например

@media (max-width: 480px) { 

h1 {font-size: 2em } 
h2 {font-size: 1em} 
p{font-size:1em} 
} 

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

@media (min-width:481px) and (max-width: 767px) { 

body{ 
font-size:90%; 
} 
} 

удачи!