根据屏幕尺寸切换CSS类

前端之家收集整理的这篇文章主要介绍了根据屏幕尺寸切换CSS类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
CSS nob这里

我正在看一个响应式框架,并想象我将如何完成不同的任务.

根据屏幕的大小,他们将类添加到body标签中,如:

.PhoneVisible,.DesktopVisible等…

他们还有类可以链接到按钮:

.btn,小按钮,医疗按钮,大按钮

我很想知道如何改变你的CSS. I.E.就像是:

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

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

你必须单独设置不同的选项吗?

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

所有建议赞赏!

解决方法

看看这个 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

另一种方法是附加resize事件一些“开关代码”.

这样的事情:http://jsfiddle.net/s5dvb/

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');
    }
})

关于框架,请尝试http://purecss.io/http://getbootstrap.com/

希望它有帮助.

猜你在找的CSS相关文章