CSS nob这里
我正在看一个响应式框架,并想象我将如何完成不同的任务.
.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.
这样的事情:@L_403_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'); } })
关于框架,请尝试http://purecss.io/或http://getbootstrap.com/
希望它有帮助.