Автоматически изменять размер шрифта, чтобы предотвратить переполнение текста

Question

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

Answer 1

Использование @media css tag. И больше информации о СМИ queries for css

/* Target for all desktops */ 
body { 
    font-size: 16px; 
} 

@media screen and (min-width:480px) and (max-width:800px) { 
    /* Target landscape smartphones, portrait tablets, narrow desktops */ 
    body { 
     font-size: 14px; 
    } 
} 

@media screen and (max-width:479px) { 
    /* Target portrait smartphones */ 

    body { 
     font-size: 10px; 
    } 
} 

Answer 2

Вы можете использовать процент, но я хотел бы использовать медиа-запрос вместо так что вы можете выбрать более точные спецификации для вашего веб-сайта для меньшего экрана. Предлагаю вам ознакомиться с ними здесь - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries