Понимание причуд размеров текста в CSS для адаптивного дизайна - PullRequest
Новая
       14

Понимание причуд размеров текста в CSS для адаптивного дизайна

3 голосов
/ 13 марта 2019

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

Я пытаюсь создать свою собственную панель навигации, и я хочу, чтобы мой текст оставался с тем же размером, что и экран, становится меньше (например, как это делает загрузочная навигационная панель), но я не могу понять, как это сделать , Я проверяю источник и не понимаю, какие атрибуты использовать.

Например, у меня есть два фрагмента HTML, которые почти одинаковы, но поведение по размеру текста сильно отличается, и я понятия не имею, почему.

Без стилей, вот тело с текстом, размер которого остается таким же, как уменьшается размер экрана: 


    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
        <h2>Resize the browser window to see the effect.</h2>
    </body>

Если я удаляю один из абзацев или даже просто h2, текст теперь становится меньше по мере уменьшения размера экрана, почему это так?

Вот два кодекса, которые показывают поведение, о котором я говорю. Если вы измените размер экрана с помощью панели инструментов устройства Chrome для тестирования адаптивного дизайна, вы увидите, что эти две разные части кода показывают изменение размера текста, чтобы вести себя по-разному. Хотя, если вы измените размер только самого браузера и не используете панель инструментов устройства Chrome, они ведут себя одинаково? Так что, может быть, вы можете увидеть, как я запутался:
https://codepen.io/mhlroy/pen/oVoyeN
https://codepen.io/mhlroy/pen/eXeKxX

Вот пример панели навигации. Я пытаюсь, чтобы размер текста оставался таким же, как уменьшается размер экрана, я хочу, чтобы он оставался таким же, и я сам сделаю необходимые корректировки с помощью медиазапросов и сделаю меню становится меню гамбургера, например: https://codepen.io/mhlroy/pen/OqOEGO

Все, что я хочу, это чтобы текст оставался одинакового размера. Я видел, как некоторые люди упоминают, что используют vh для font-size. И я полагаю, что я мог бы использовать это, но, пытаясь сделать это прямо сейчас, размер текста увеличивается с уменьшением размера экрана, поэтому я все еще не уверен.

Любая помощь, проливающая свет на это, будет принята с благодарностью!

Спасибо.

Ответы [ 2 ]

1 голос
/ 14 марта 2019

Поскольку arieljuod , упомянутый в комментариях к моему первоначальному вопросу, добавление <meta name="viewport" content="width=device-width, initial-scale=1.0"/> в head устраняет мою проблему.
Теперь это работает более последовательно и, как я лично ожидал, что,не должен уменьшать масштаб страницы при изменении размера экрана.

0 голосов
/ 13 марта 2019

Самое первое, что я бы вам сказал, это знать, какие единицы измерения являются относительными, а какие фиксированными.Размер вашего текста в vh говорит, что мой текст х в процентах от высоты экрана.Поэтому, конечно, когда высота экрана меняется, меняется размер текста.Вы должны использовать единицу, которая не зависит от размера экрана.Параметры включают в себя, но не ограничиваются этим, размер в пикселях (px) или в полях (rem).rem - это относительная единица, но она относится к корневому (body) размеру шрифта и изменяется только в случае его изменения.Надеюсь, это поможет!

...