Изменить размер текста

Question

У меня есть такой шаблон шаблона html. Я использую bootsrap для стильного.

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 positon-relative-block-down"> 
    <p class="down">Lorem Ipsum is simply dummy</p> 
    </div> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 positon-relative-block-up"> 
     <p class="up">Lorem Ipsum is simply dummy Lorem Ipsum is simply dummy</p> 
    </div> 
    <div class="col-lg-7 col-md-7 col-sm-8 col-xs-11 positon-relative-block-describe"> 
     <p class="describe">Lorem Ipsum is simply dummy Lorem Ipsum is simply dummy</p> 
    </div> 
</div> 

У меня такая проблема: если мой размер окна будет col-xs, мой текст не подходит. Мой вопрос заключается в том, как добавить стиль текста для Col-хз, которым должно быть меньше

Answer 1

Одним из примеров может быть:

@media screen and (max-width:480px) 
{ 
    [class*='col-xs'] p 
    { 
    font-size:10px; 
    } 
} 

Таким образом, вы вынуждаете font-size для всех элементов, содержащих пункт p внутри родовой «col-xs» класс (col-xs-6), особенно когда ширина экрана ниже обычной ширины экрана, используемой суффиксом XS классов Bootstrap.

Answer 2

Я рекомендую вам попробовать использовать фольксваген вместо пикселей для размера шрифта, например:

div { font-size:2vw} 

Фольксвагена является ViewportWidth, что сделает ваш шрифт реагирующим на ширину устройства, попробуйте это очень полезно для responsives конструкций , вы можете увидеть пример:
https://css-tricks.com/viewport-sized-typography/
Это было решение для меня в отзывчивом мире. Надеюсь, что это вам поможет.