Я создал адаптивный сайт и хочу использовать em для управления размером шрифта.
Я установил базовый размер основного шрифта на 64,5%, как рекомендуется, чтобы создать базовый размер 10 пикселей.
Однако, несмотря на то, что размеры выглядят нормально, они не меняются в зависимости от размера браузера. Что мне не хватает?
Посмотрите, поможет ли это вам: http://jsfiddle.net/panchroma/qK8j2/
В вашем примере вы явно установили размеры шрифта, и ничто не указывает, что шрифты должны масштабироваться при изменении точки обзора.
Параметрbody{
font-size:62.5%;
} просто устанавливает размер шрифта (относительно настройки браузера по умолчанию), он не приводит к какому-либо масштабированию.
Несколько способов добиться того, чего вы хотите, — это либо установить размеры для h1, h2, p и т. д. по мере изменения точки зрения, используя @media query , например
@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%;
}
}
Удачи!
