Можно ли сохранить ширину абзаца (рабочий стол - мобильный) без использования медиа-запросов в css?

Question

Расширение заголовка здесь. Я имею в виду, у меня есть текст в div, который я хочу иметь ширину 75% в режиме рабочего стола. Проблема возникает в мобильном режиме, поскольку div, очевидно, все еще имеет ширину 75% и выглядит странно, он должен иметь 100%. Конечно, я могу исправить это с помощью медиа-запросов, но кажется ненужным тратить пару строк кода CSS только на это небольшое исправление. См. Изображения для дальнейшего объяснения.

Настольная версия: https://i.stack.imgur.com/q4PAR.png

Мобильная версия: https://i.stack.imgur.com/SpmOI.png

Мобильная версия выглядит странно, когда ширина всего 75%. Я новичок в CSS3, поэтому мне просто интересно, знаете ли вы, ребята, какой-нибудь лучший способ вместо использования медиа-запросов постоянно и везде.

Пример кода:

<div class="birch"> A lot of text </div>
.birch {width:75%}

Спасибо !

Answer 1

В некоторых случаях лучше использовать max-width вместо width свойство.

Например.

.birch {
  max-width: 480px;
}

Это даст вам хороший выровненный абзац на рабочем столе, и полноразмерный абзац на мобильном телефоне. Да, для вычисления идеального max-width требуется время, но это также дает вам свободу не писать никаких дополнительных медиа-запросов.