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 less代码，有四种屏幕尺寸。我可以通过使用媒体查询将上述内容合并到一个类中吗？如果是这样的话。

谢谢

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更改屏幕大小时更改字体大小

1 个答案: