تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

Как сделать адаптивный шрифт?

+ إضافة رد

3 مشاركة صفحة 1 من 1


Как сделать адаптивный шрифт?

بواسطة Konstantin124 » الخميس مارس 20, 2014 2:30 pm

Всем доброго времени суток!

Пытаюсь сделать адаптивный шаблон для joomla3 на 3-м бутстрапе. Как сделать, чтобы с уменьшением разрешения пропорционально уменьшался размер шрифта, типа как img-responsive?

Пытался использовать rem:
CODE: تحديد الكل
html { font-size: 100%; }

@media (min-width: 768px) {
body { font-size: 1rem;
}}
@media (max-width: 767px) {
body {
   font-size: 1rem;
}}
@media (min-width: 992px) {
body {
   font-size: 1.2rem;
}}
@media (max-width: 991px) {
body {
   font-size: 1.2rem;
}}
@media (min-width: 1280px) {
body {
   font-size: 1.5rem;
}}
@media (max-width: 1279px) {
body {
   font-size: 1.5rem;
}}

Прописал h1-h6 в rem, закомментил везде font-size в пикселах. Нифига не работает, нету адаптивности ни в одном браузере.

Как можно решить эту проблему, не используя javascript? И не предусмотрено ли решение в самом бутстрапе, которое я просто не понял? Вроде бы там h1-h6 в дробях от базового размера вычисляются? Тогда почему у меня в скачанном после кастомизации CSS весь font-size в пикселах?

Прошу помощи уважаемого сообщества. Очень некрасиво, когда надписи сайдбара залезают на контент. Шаблон показать не могу - он на локалке. Всем ответившим спасибо.
صورة العضو الشخصية

Konstantin124

  • مشاركات: 1
  • اشترك في: الخميس مارس 20, 2014 2:27 pm

Re: Как сделать адаптивный шрифт?

بواسطة XainPro » الجمعة مارس 21, 2014 9:59 am

body {
font-size: 100%; /* start with a flexible baseline, more on this in the next section */
}

h1 {
font-size: 2.5em;
}

@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}

@media screen and (max-width: 40em) {
h1 {
font-size:1.5em;
}
}

@media screen and (max-width: 30em) {
h1 {
font-size:1.2em;
}
}
صورة العضو الشخصية

XainPro

  • مشاركات: 3933
  • اشترك في: الجمعة فبراير 17, 2012 8:10 pm

Re: Как сделать адаптивный шрифт?

بواسطة Samanrmad » السبت مارس 28, 2015 9:07 am

I read this really good friend.
صورة العضو الشخصية

Samanrmad

  • مشاركات: 1
  • اشترك في: السبت مارس 28, 2015 8:41 am


+ إضافة رد

صفحة 1 من 1