Изменение размера шрифта CSS с помощью окна браузера

Question

Возможно ли это с помощью CSS или JavaScript? Так что, если я хочу шрифт 20pt или 1em или аналогичный при определенном размере браузера, но шрифт будет уменьшаться и расширяться, если окно браузера уменьшается или расширяется? Спасибо

Answer 1

нет правильного решения CSS, о котором я знаю. Вы можете определить размер шрифта в%, но это займет% пикселей шрифта родительских элементов.

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

.p {
   font-size: 20px; 
}    
@media screen and (max-width: 600px) {
  .p {
   font-size: 12px; 
  }
}
@media screen and (max-width: 800px) {
  .p {
   font-size: 14px; 
  }
}
@media screen and (max-width: 1000px) {
  .p {
   font-size: 16px; 
  }
}
@media screen and (max-width: 1200px) {
  .p {
   font-size: 18px; 
  }
}

Answer 2

Вы можете использовать событие onResize, чтобы сделать это. Для этого можно использовать jQuery, например: http://api.jquery.com/resize/. Вам нужно только применить правильные изменения CSS для определенных элементов.

Answer 3

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

http://github.com/wadim/responsive-font-size

В комплекте с четырьмя параметрами этот миксин разумно определит правильные определения медиазапросов для вас.