使用 less 更改屏幕大小时更改字体大小答案

【问题标题】：change fonts size when screen size changes using less使用 less 更改屏幕大小时更改字体大小
【发布时间】：2015-02-04 19:19:49
【问题描述】：

当浏览器使用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;
}

以上是我目前所写的。我已经修改了一些无引导代码，使其具有四种屏幕尺寸。我可以通过使用媒体查询将上述内容合并到一个类中吗？如果有怎么办。

谢谢

【问题讨论】：

已经用更少的方法解决了。可以使用媒体查询来完成。

标签： css twitter-bootstrap less

【解决方案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;
    }
}

上述较少样式的代码代码有效。

【讨论】：