Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.84/19: Рейтинг темы: голосов - 19, средняя оценка - 4.84
Serb124
2 / 2 / 0
Регистрация: 13.12.2013
Сообщений: 25
1

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

20.03.2014, 17:52. Просмотров 3562. Ответов 1
Метки нет (Все метки)

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

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

Пытался использовать rem:
Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 в пикселах?

Прошу помощи уважаемого сообщества. Очень некрасиво, когда надписи сайдбара залезают на контент. Шаблон показать не могу - он на локалке. Всем ответившим спасибо.
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.03.2014, 17:52
Ответы с готовыми решениями:

как сделать адаптивный дизайн
Подскажите как можно сделать адаптивный дизайн если я сделал две верстки под...

Как сделать адаптивный текст Html элементов с flex?
Само изображение 01.png маштабируеться с маштабирование окна...

Bootstrap3: как сделать адаптивный текст, ссылки и фон?
Подскажите пож как в боотстрап3 делают адаптивный текст, ссылки, и фон. ...

Как сделать адаптивный дизайн div со скроллингом на весь экран?
Подскажите пожалуста как можно сделать вывод текста в div со скроллингом на...

DLE 9.2 как сделать выпадающее меню в шаблоне
Как сделать чтобы при наведении мышкой на верхнею категорию, выпадало меню?...

1
monochromer
411 / 373 / 163
Регистрация: 03.01.2013
Сообщений: 966
21.03.2014, 11:35 2
Лучший ответ Сообщение было отмечено Serb124 как решение

Решение

Просто Вы привели специфический пример.
Вот та же техника. У меня работает.
HTML5
1
<h2>Header</h2>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
:root{
  font-size:100%;
}
 
h2{
  font: .8rem "Open Sans";
}
 
@media (min-width: 320px){
  h2{
    font-size: 1rem;
  }
}
 
@media (min-width: 480px){
  h2{
    font-size: 1.2rem;
  }
}
 
@media (min-width: 640px){
  h2{
    font-size: 1.5rem;
  }
}
 
@media (min-width: 720px){
  h2{
    font-size: 1.8rem;
  }
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.03.2014, 11:35

как сделать шрифт зелёным ?
напишите плз на примере :)

Как сделать такой шрифт средствами css?
как сделать такой шрифт средствами css?

Имеется шрифт. Как сделать надпись этим шрифтом?
Имметься текст шрифта AdverGothic как мне сделать надпись таким шрифтом ?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru