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

Question

vladislav3221 @vladislav3221

CSS

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

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

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

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 сгладить углы при использовании border-radius?
- 1 подписчик
- 5 часов назад
- 64 просмотра
0

ответов
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 20 часов назад
- 54 просмотра
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 50 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 83 просмотра
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 71 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 103 просмотра
1

ответ
JavaScript

+3 ещё

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

ответ
HTML

+1 ещё

Простой
Как сделать метку/ярлык?
- 1 подписчик
- 18 нояб.
- 43 просмотра
0

ответов
CSS

Простой
Как сверстать данный блок?
- 1 подписчик
- 18 нояб.
- 89 просмотров
3

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Рефакторинг vue.js/nest.js интерфейса у админки

22 нояб. 2024, в 15:50

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

Разработать индикатор для торговой платформы Metatreder5

22 нояб. 2024, в 15:00

2500 руб./в час

Разработка базы данных на SQL

22 нояб. 2024, в 14:51

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

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

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

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

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

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

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

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