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

Question

vladislav3221 @vladislav3221

CSS

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

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

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

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

Простой
Как прописать стили для маски css, чтобы изображение отображалось сверху?
- 1 подписчик
- 12 часов назад
- 42 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как создать таблицу?
- 1 подписчик
- 31 янв.
- 124 просмотра
1

ответ
CSS

Простой
Как сделать так, чтобы строки таблицы не растягивались?
- 1 подписчик
- 30 янв.
- 90 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать такую анимацию кнопки при наведении?
- 1 подписчик
- 30 янв.
- 158 просмотров
1

ответ
CSS

Простой
Откута берется эта белая линия?
- 1 подписчик
- 29 янв.
- 143 просмотра
2

ответа
CSS

+1 ещё

Средний
Проблема с подключением CSS файлом на 1CБитрикс?
- нет подписчиков
- 27 янв.
- 111 просмотров
1

ответ
CSS

Простой
Как сверстать такой блок на css или canvas?
- 5 подписчиков
- 26 янв.
- 4367 просмотров
2

ответа
HTML

+2 ещё

Средний
Как сверстать блок с прорезями, в которых видно видео, которое играет на заднем плане?
- 1 подписчик
- 26 янв.
- 1386 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему не правильно отображаються элементы пагинации при скролее Slider Swiper?
- 2 подписчика
- 26 янв.
- 232 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Делаю свой видеоплеер: при попытке перемотать видео, ползунок возвращается в начало и видео начинается заново. Что не так?
- 1 подписчик
- 25 янв.
- 178 просмотров
1

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

Написание отзыва

02 февр. 2025, в 12:33

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

Вставить js событие onclick в кнопку на Tilda

02 февр. 2025, в 12:27

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

Написание отзывов

02 февр. 2025, в 11:35

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

Можно 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..

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

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

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

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

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

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