Масштабируемый шрифт

@montukxd · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

http://montuk.tmweb.ru/ - верстаю адаптивный дизайн, проблема с масштабируемостью шрифтов

т.е. все элементы при изменении разрешения стоят на своем месте, а шрифты увеличиваются, кто знает как исправить?
Проверяю на всех разрешениях тут - http://quirktools.com/screenfly/
Все впорядке, только шрифты подводят

Уже возникают мысли делать их картинками

@tasadarMiha · 12.07.2014, 07:18

Ну, вы очень хорошо перевели все блоки в относительные единицы, а шрифты то почему в px?

@Дмитрий76 · 12.07.2014, 07:43

Как это шрифты увеличиваются? Шрифты остаются какими и были. Просто блоки наплывают друг на друга.
А происходит это из за правила

CSS
1
2
3
.sub_main_block {
  height: 30%;
}

Замени на

CSS
1
2
3
.sub_main_block {
  min-height: 30%;
}

И заголовки тоже сделай текстом, а не картинками. Смысл адаптивной верстки не в том, чтобы все элементы уменьшались пропорционально друг другу и на маленьких экранах становились едва различимыми

.

Добавлено через 7 минут

Сообщение от Дмитрий76

CSS
1
2
3
4
Замени на
.sub_main_block {
 min-height: 30%;
}

Хотя лучше вообще убрать высоту. Пусть высота определяется автоматически. А отступы блоков друг от друга задать через свойство margin-bottom.

@tasadarMiha · 12.07.2014, 07:44

Мне кажется что в том то и проблема, что они остаются какими были, а должны увеличиваться, из за этого у нас на большом масштабе все блоки огромные, а шрифты так и остаются 20px (и на оборот)

@troayn32 · 12.07.2014, 08:44

Используйте относительные единицы измерения для font-size. А потом в @media ставьте разный font-size для body в зависимости от разрешения экрана

@Taatshi · 13.07.2014, 08:46

Размер шрифта в зависимости от разрешения экрана

JavaScript
1
2
3
4
5
6
<script type="text/javascript">
var proportion = 860/14;
function resizeFont() { document.body.style.fontSize = parseInt(document.body.offsetWidth/proportion) + 'px' }
onload = onresize = resizeFont;
if (document.addEventListener) document.addEventListener("DOMContentLoaded", resizeFont, null);
</script>

А единицы нужным шрифтам уже задаете в em

@montukxd · 13.07.2014, 20:25 **[ТС]**

Всем спасибо, всё шикарно работает, воспользовался способом Taatshi.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@montukxd 8 / 8 / 3 Регистрация: 21.02.2014 Сообщений: 71

	Масштабируемый шрифт 11.07.2014, 22:56. Показов 7000. Ответов 6 Метки нет (Все метки) http://montuk.tmweb.ru/ - верстаю адаптивный дизайн, проблема с масштабируемостью шрифтов т.е. все элементы при изменении разрешения стоят на своем месте, а шрифты увеличиваются, кто знает как исправить? Проверяю на всех разрешениях тут - http://quirktools.com/screenfly/ Все впорядке, только шрифты подводят Уже возникают мысли делать их картинками 0

@tasadarMiha 1 / 1 / 0 Регистрация: 12.07.2014 Сообщений: 53
	12.07.2014, 07:18
	Ну, вы очень хорошо перевели все блоки в относительные единицы, а шрифты то почему в px? 0

@tasadarMiha 1 / 1 / 0 Регистрация: 12.07.2014 Сообщений: 53
	12.07.2014, 07:44
	Мне кажется что в том то и проблема, что они остаются какими были, а должны увеличиваться, из за этого у нас на большом масштабе все блоки огромные, а шрифты так и остаются 20px (и на оборот) 0

@troayn32 25 / 25 / 9 Регистрация: 18.09.2011 Сообщений: 130
	12.07.2014, 08:44
	Используйте относительные единицы измерения для font-size. А потом в @media ставьте разный font-size для body в зависимости от разрешения экрана 1

@montukxd 8 / 8 / 3 Регистрация: 21.02.2014 Сообщений: 71
	13.07.2014, 20:25 [ТС]
	Всем спасибо, всё шикарно работает, воспользовался способом Taatshi. 0

Масштабируемый шрифт

Решение