Размер шрифта в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Изначально мы имеем картинку, на которой расположен в нужном месте текст, который не перекрывает определенные ее части.

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

Пример с точными размерами:

Размер шрифта 48px

CSS

.fontsize {
	position: relative;
}
.fontsize img {
	width: 100%;
}
.fontsize .text {
	width: 100%;
	position: absolute;
	font-family: 'Roboto', sans-serif;  
	color: #337AB7;
	font-size: 48px;
	top: 40px;
	left: 130px;
}

.fontsize {

position: relative;

}

.fontsize img {

width: 100%;

}

.fontsize .text {

width: 100%;

position: absolute;

font-family: 'Roboto', sans-serif;

color: #337AB7;

font-size: 48px;

top: 40px;

left: 130px;

}

HTML

<div class="fontsize">
	<div class="text">Размер шрифта</div>
	<img src="font-size.jpg" /> 
</div>

<div class="text">Размер шрифта</div>

</div>

Текст отлично расположен в блоке, но если ширина экрана увеличится или уменьшится, то становится видно, что шрифт перекрывает волны или просто не умещается в заданном блоке.

Чтобы правильно изменять размер шрифта воспользуемся примером ниже, в котором используется небольшой JS

Пример с размерами через JS:

Размер шрифта 48px

HTML и CSS у нас остаются прежние (в CSS можно удалить лишнее, это свойства font-size, top и left, которые мы задаем через JS)

JS

function fontsize() {
	let block = document.querySelector('.fontsize');
	let text = document.querySelector('.fontsize .text');
    let w = block.offsetWidth;
    text.style.fontSize = w/24 + "px";
    text.style.top = w/38 + "px";
	text.style.left = w/9 + "px";
}
window.onload = fontsize;
window.onresize = fontsize;

function fontsize() {

let block = document.querySelector('.fontsize');

let text = document.querySelector('.fontsize .text');

let w = block.offsetWidth;

text.style.fontSize = w/24 + "px";

text.style.top = w/38 + "px";

text.style.left = w/9 + "px";

}

window.onload = fontsize;

window.onresize = fontsize;

Теперь если блок изменит свои размеры, текст это сделает тоже в соответствии с нужными пропорциями, которые устанавливаются на глаз.

Если ширина блока равна ширине экрана, то можно обойтись без JS и установить все размеры исходя из него.

Пример с размерами на CSS, если ширина блока равна экрану:

Размер шрифта

HTML для этого примера остается прежним, JS нам не нужен, а размеры в CSS будет такими:

.fontsize .text {
	font-size: 4vw;
	top: 4vw;
	left: 12vw;	
}

.fontsize .text {

font-size: 4vw;

top: 4vw;

left: 12vw;

}

Где размер текста и его позиция также устанавливаются на глаз на любом разрешении экрана.

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 03.01.2021 / Обновлено: 03.03.2022
Рубрики: Вкладки, блоки и списки, Тексты, ссылки и кнопки
Метки: CSS, JavaScript
20994 просмотра

Смотрите также:

Блоки из фигур на CSS

Варианты оформления блоков из различных фигур: трапеций, окружностей, треугольников и т.д.

3D табы с картинкой и описанием

Трехмерное переключение вкладок, в которых присутствует фотография и ее описание

Адаптивная сетка для новостных блоков

Адаптивная сетка с одинаковыми по высоте блоками для превью новостей или статей

Добавить комментарий:

Ваш комментарий отправлен!

Алексей: 03.01.2021 в 17:23

У меня пара вопросов
1 - почему на примере размер шрифта в 4vw показывается в пикселях
2 - зачем вообще нужен JS, когда можно всегда считать по этой ширине экрана?

Ответить
- Alexander: 03.01.2021 в 17:50
  
  1 - пример не всегда у меня показывает тот код, который дается, иногда я его меняю для удобства и наглядности. В этом случае там показывается 4vw, но значение указано в пикселях, чтобы видеть его реальный размер.
  2 - Блок не всегда может быть связан с шириной экрана, например на 1200 точках справа может быть колонка еще и наш блок будет шириной 700px, а на разрешении 900 точек наш блок может и прибавиться даже, т.к. колонка скроется или пойдет ниже.
  
  Ответить