Изменить размер шрифта в соответствии с разрешением монитора

Question

Я начинаю и затрудняюсь с настройкой размера шрифта. Когда разрешение дисплея изменяется, текст превышает лимит div. Я бы хотел, вместо того, чтобы выйти за пределы div, что текст изменит разрешение в соответствии с остальной частью макета.

Скриншот

HTML:

<div class="sec" id="se"> 

    <div class="title"> 
    </div> 
    <img class="img" src="img/i.jpg"> 
    <div class="secleft"> 
     <div class="txt"> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p> 
     </div> 

    </div> 
    <div class="secright"> 
    </div> 
</div> 

CSS:

.sec{ 
    position: absolute; 
    height: 50%; 
    width: 100%; 
    background-color: #009fb2; 
    top: 75%; 
} 
.title{ 
    position: absolute; 
    height: 15%; 
    width: 40%; 
    background-color: red; 
    top: 5%; 
    left: 30%; 
} 
.img{ 

    position: relative; 
    width: 16%; 
    left: 42%; 
    top: 28%; 
} 

.secleft{ 
    position: absolute; 
    height: 57%; 
    width: 30%; 
    background-color: #006672; 
    top: 28%; 
    left: 7%; 
    border-radius: 3px; 
} 

.txt{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
} 

Answer 1

Это то, что требуется для запросов CSS Media.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Вы можете использовать @media (max-width: 750px) {css here..}

Что это делает он применяет различные CSS в зависимости от ширины экрана. Таким образом, вы можете применять другой размер шрифта внутри этого блока, тогда он будет использоваться только тогда, когда экран будет меньше 750 пикселей в ширину. Примечание 750 является лишь примером и может быть настроено на все, что вам нравится.

Пример:

body { 
    font-size: 3em; 
    } 

@media (max-width: 750px) { 
    body { 
    font-size: 1em; 
    } 
} 

Answer 2

установить размер шрифта с следующий CSS:

font-size: 1vw; 

Answer 3

Блок em является относительно его родителей. Определите несколько точек останова, используя медиа-запросы, и измените размер шрифта родителя, и его дети будут уменьшаться относительно их родителя.

Например: https://jsfiddle.net/jpa1fab8/

Как вы можете видеть изменения размера шрифта относительно их контейнера. Перетащите разделитель в JSFiddle сделать контейнер меньше

Итак: определить ваш font-size, как em и использовать @media для изменения font-size на основе определенной breakpoints. Эти контрольные точки Bootstrap CSS использует: https://v4-alpha.getbootstrap.com/layout/overview/