根据屏幕大小切换 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18477016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Switching CSS classes based on screen size
提问by FatFingers
CSS nob here...
CSS nob 在这里...
I'm looking at a responsive framework and imagining how I would accomplish different tasks.
我正在研究一个响应式框架并想象我将如何完成不同的任务。
Based on the size of the screen, they have classes added to the body tag such as:
根据屏幕的大小，他们将类添加到 body 标签中，例如：
.PhoneVisible, .DesktopVisible, etc...
.PhoneVisible、.DesktopVisible 等...
They also have classes to make links into buttons :
他们还有将链接制作成按钮的类：
.btn, small-button, med-button, large-button
.btn、小按钮、中按钮、大按钮
I'm puzzled on how you would go about changing your CSS. I.E. something like:
我对您将如何更改 CSS 感到困惑。IE类似：
<a href="#" class="MyButtonOptions">XXXX</>
.PhoneVisible .MyButtonOptions { btn small-button }
.TabletVisible .MyButtonOptions { btn med-button }
.DesktopVisible .MyButtonOptions { btn large-button }
Do you have to set the varying options individually?
您是否必须单独设置不同的选项？
i.e. .PhoneVisible .MyButtonOptions { height:30px; } ???
即 .PhoneVisible .MyButtonOptions { height:30px; ？？？
All advice appreciated!
所有建议表示赞赏！
采纳答案by Felipe Miosso
Take a look at this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
看看这个https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。
Another way is to attach the resize event some piece of "switch code".
另一种方法是为调整大小事件附加一些“切换代码”。
Something like this: http://jsfiddle.net/s5dvb/
像这样的东西：http: //jsfiddle.net/s5dvb/
HTML
HTML
<div id="body" class="limit400">
<h1>Hey :D</h1>
</div>
CSS
CSS
.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }
JS
JS
$(window).on('resize', function() {
if($(window).height() > 400) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}else{
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
About the frameworks, try http://purecss.io/or http://getbootstrap.com/
关于框架，请尝试http://purecss.io/或http://getbootstrap.com/
Hope it helps.
希望能帮助到你。
回答by Nej Kutcharian
CSS Media Queries are definetly the way to go.
CSS 媒体查询无疑是要走的路。
You can easily separate your CSS based upon the browser size, pixel density, etc.
您可以根据浏览器大小、像素密度等轻松分离 CSS。
Here's a list of examples from CSS-Tricks.
这是来自CSS-Tricks的示例列表。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
