根据屏幕大小切换CSS类

Question

CSS nob在这里…

我正在研究一个响应式框架，并想象如何完成不同的任务。

根据屏幕的大小，它们具有添加到body标签的类，例如：

.PhoneVisible，.DesktopVisible等…

他们也有将按钮链接到的类：

.btn，小按钮，中按钮，大按钮

我对如何更改CSS感到困惑。IE浏览器类似：

<a href="#" class="MyButtonOptions">XXXX</>

.PhoneVisible .MyButtonOptions { btn small-button }
.TabletVisible  .MyButtonOptions { btn  med-button }
.DesktopVisible .MyButtonOptions { btn large-button }

您是否必须单独设置各种选项？

即.PhoneVisible .MyButtonOptions {height：30px; } ???

所有建议表示赞赏！

Answer 1

另一种方法是将调整大小事件附加一些“切换代码”。

HTML

<div id="body" class="limit400">
    <h1>Hey :D</h1>
</div>

CSS

.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }

JS

$(window).on('resize', function() {
    if($(window).height() > 400) {
        $('#body').addClass('limit1200');
        $('#body').removeClass('limit400');
    }else{
        $('#body').addClass('limit400');
        $('#body').removeClass('limit1200');
    }
})

希望能帮助到你。