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

Question

vladislav3221 @vladislav3221

CSS

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

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

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

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, Честно сказать я даже не знаю)))

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

Ответы на вопрос 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

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- вчера
- 123 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 195 просмотров
3

ответа
CSS

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

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 100 просмотров
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 153 просмотра
2

ответа
CSS

Простой
CSS3 как выбрать последние 4 элемента?
- 1 подписчик
- 25 сент.
- 206 просмотров
2

ответа
CSS

Простой
Как заставить css-variables перевычисляться?
- 1 подписчик
- 23 сент.
- 175 просмотров
1

ответ
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 201 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 340 просмотров
1

ответ
CSS

Простой
Как в CSS писать стили исходя из ширины себя как @container?
- 2 подписчика
- 18 сент.
- 168 просмотров
1

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

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

ITK academy • Нижний Новгород

от 80 000 до 120 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Web-разработчик

ЭНДИ Консалтинг

от 40 000 до 40 000 ₽

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

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

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

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

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

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

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