Как понять из-за чего разный размер текста?

Question

vladislav3221 @vladislav3221

CSS

Как понять из-за чего разный размер текста?

Font-size везде одинаковый, но размер шрифта разный. Как сделать так, чтобы текст просто отдалялся при уменьшении разрешения.

Вопрос задан более трёх лет назад
170 просмотров

14 комментариев

Подписаться 1 Простой 14 комментариев

UncleMisha @UncleMisha

Можно CSS? по картинке не чего не понятно.

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

UncleMisha,

Написано более трёх лет назад
UncleMisha @UncleMisha

vladislav3221, Данная проблема только на мобильных устройствах? Или же в веб версии тоже?

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

UncleMisha, на мобильных только

Написано более трёх лет назад
UncleMisha @UncleMisha

vladislav3221, не имея кода на руках я точно сказать не могу. Но тут явно проблема в @media у Вас имеется файл "media.css? или в самом CSS строчка @media

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

vladislav3221, делайте font-size в vw, если хотите масштабирования относительно размера экрана.

Написано более трёх лет назад
UncleMisha @UncleMisha
vladislav3221, Я приведу пример как это работает Допустим есть такой html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Пример Media запросов</h1> </body> </html>

и естественно CSS
h1 { font-size: 20px; } @media (max-width: 768px) { h1 { font-size: 15px; } }

Исходя из этого на экранах с шириной до 768px размер h1 будет 15px. А на экранах с шириной от 769px до бесконечности будет 20px.
Других вариантов я не вижу.
Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

UncleMisha, медиа запросов нет, и файлов дополнительных с ними

Написано более трёх лет назад
UncleMisha @UncleMisha

vladislav3221, Блин, я даже не знаю как помочь, а можешь ссылку на сайт скинуть? Покопаться в коде может что найду. Теперь самому стало интересно.

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

UncleMisha, это лишь файлы на моем компьютере

Написано более трёх лет назад
UncleMisha @UncleMisha

vladislav3221, Попробуйте прописать не "margin-top" а "padding-top"

Написано более трёх лет назад
UncleMisha @UncleMisha

.who__text {
width: 100%;
padding-top: 15px;
color: black;
font-family: "Roboto";
font-size: 21px;
font-weight: bold;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

UncleMisha, ничего не поменялось)

Написано более трёх лет назад
UncleMisha @UncleMisha

vladislav3221, Честно сказать я даже не знаю)))

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

9 комментариев

vladislav3221 @vladislav3221 Автор вопроса

в пикселях

Написано более трёх лет назад
DanKud @DanKud

vladislav3221, ну вы же понимаете, что текст не может быть разного размера если указан одинаковый размер в пикселях. Значит где-то указаны другие значения, которые перебивают значения указанные например для определенного класса. Посмотрите через Панель разработчика в браузере какие именно размеры текста и от чего подключает браузер.

Написано более трёх лет назад
Антон @Eridani

vladislav3221, Вы считаете, что по картинке можно точно определить действительное положение проблемы?

Написано более трёх лет назад
Moses Fender @mosesfender

То есть, последнее что получает блок font-size = <сколько-то там>px ? Вот как тут, например.

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

DanKud,вроде ничего друг друга не перебивает

Написано более трёх лет назад
Moses Fender @mosesfender

А что там с transform блока, в котором эти два абзаца?

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

Moses Fender, для двух абзацев прописан displey: flex

Написано более трёх лет назад
Moses Fender @mosesfender

vladislav3221, а в чём смысл этого flex'а, особенно в этих абзацах?
я про transform интересовался. Нет ли в верхнем блоке какого-нибуд scale()?

Написано более трёх лет назад
vladislav3221 @vladislav3221 Автор вопроса

Moses Fender, нет конечно

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

Простой
Как сделать это меню в 2 ряда, а не чтобы всё вываливалось?
- 1 подписчик
- только что
- 2 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 2 часа назад
- 29 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 3 часа назад
- 96 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 22 часа назад
- 48 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 22 часа назад
- 54 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 23 апр.
- 85 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 709 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Написать 3 раздела ВКР

25 апр. 2024, в 14:44

10000 руб./за проект

Создание теста в Postman

25 апр. 2024, в 14:44

250 руб./в час

Учебный проект - бронирование отелей, FastAPI, SQLA + HTML, CSS, JS

25 апр. 2024, в 14:41

5000 руб./за проект

Можно CSS? по картинке не чего не понятно.
vladislav3221, Данная проблема только на мобильных устройствах? Или же в веб версии тоже?
vladislav3221, не имея кода на руках я точно сказать не могу. Но тут явно проблема в @media у Вас имеется файл "media.css? или в самом CSS строчка @media
vladislav3221, делайте font-size в vw, если хотите масштабирования относительно размера экрана.
vladislav3221, Я приведу пример как это работает Допустим есть такой html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Пример Media запросов</h1> </body> </html>

и естественно CSS
h1 { font-size: 20px; } @media (max-width: 768px) { h1 { font-size: 15px; } }

Исходя из этого на экранах с шириной до 768px размер h1 будет 15px. А на экранах с шириной от 769px до бесконечности будет 20px.
Других вариантов я не вижу.
UncleMisha, медиа запросов нет, и файлов дополнительных с ними
vladislav3221, Блин, я даже не знаю как помочь, а можешь ссылку на сайт скинуть? Покопаться в коде может что найду. Теперь самому стало интересно.
UncleMisha, это лишь файлы на моем компьютере
vladislav3221, Попробуйте прописать не "margin-top" а "padding-top"
.who__text {
width: 100%;
padding-top: 15px;
color: black;
font-family: "Roboto";
font-size: 21px;
font-weight: bold;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
vladislav3221, Честно сказать я даже не знаю)))

Answer 1 · 2019-04-19 12:15:40

font-size везде одинаковый, полагаю, в em или rem. А то и вовсе в %.
Рекомендую почитать об относительных единицах измерения в CSS. Что от чего относительно измеряется.

Answer 2 · 2019-04-19 14:06:49

Мария Коробкоголовых @Rikazavr

web design hippie

Только на мобильных? Попробуй тогда прописать text-size-adjust: none; для html или body..

Ответ написан более трёх лет назад

Комментировать

Как понять из-за чего разный размер текста?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт