css - 使用 less 更改屏幕大小时更改字体大小

Question

有没有办法在使用 less 调整浏览器大小时更改字体大小？无需为每个屏幕尺寸创建不同的类。

样式代码少

.banner-xlg-h1
{
    .hidden-lg;
    .hidden-md;
    .hidden-sm;
    .hidden-xs;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    font-size:36pt;
}
.banner-lg-h1
{
    .hidden-xlg;
    .hidden-md;
    .hidden-sm;
    .hidden-xs;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    font-size:30pt;
}
.banner-md-h1
{
    .hidden-xlg;
    .hidden-lg;
    .hidden-sm;
    .hidden-xs;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    font-size:24pt;
}
.banner-sm-h1
{
    .hidden-xlg;
    .hidden-lg;
    .hidden-md;
    .hidden-xs;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    font-size:18pt;
}
.banner-xs-h1
{
    .hidden-xlg;
    .hidden-lg;
    .hidden-md;
    .hidden-sm;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    font-size:12pt;
}

以上是我目前写的。我已经修改了一些无 Bootstrap 代码以具有四种屏幕尺寸。我可以通过使用媒体查询将以上内容组合到一个类中吗？如果是这样的话。

谢谢

Answer 1

.banner-h1
{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max)
    {
        font-size:12pt;
    }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max)
    {
        font-size:18pt;
    }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max)
    {
        font-size:24pt;
    }
    @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max)
    {
        font-size:30pt;
    }
    @media (min-width: @screen-xlg-min ){
       font-size:36pt;
    }
}

上面的 less 样式代码有效。