Why is the font for xl devices reduced in bootstrap?

Question

css

Hello, I just started learning Bootstrap. I wanted to make a small layout, it should look like this:

Here is the code:
index.html:

<div class="container">
       <div class="row">
        <div class="col-xl-12 col-sm-12 col-md-12">Хедер</div>
        </div>
    </div>

styles.less:

@green:green;
@black:black;
@white:white;

.container{
    background: @green;
    width: 1000px;
    height: 2000px;
}

.col-xl-12, .col-sm-12, .col-md-12{
    background: @black;
    width: 1000px;
    height: 100px;
    margin: 0px;
    color:@white;
    font-size:50px;
    text-align: center;
}

But I need to reduce the font size to 25 px at the "Heder" label on a smartphone and tablet, and I added this to styles.less:

.col-sm-12, .col-md-12{
   font-size:25px;
}

But when I wrote this code, the font on my computer monitor also decreased to 25 px, but I don’t need it, I need 50px on the computer monitor. How can I write the code then?

Answer 1

study