Javascript 如何使用媒体查询删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32421616/
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
How to remove class with media queries
提问by ?R ?mm?? ????h
When @media screen and (max-width: 500px)is in active removing class .fade. How can i do this? my script is here below.
当@media screen 和 (max-width: 500px)处于活动删除类.fade 时。我怎样才能做到这一点？我的脚本在下面。
@media screen and (max-width: 500px) {
.post_profile_image{
width:35px;
height:35px
}
.fade{
/* Remove this class */
}
}
<div id="myModal" class="modal fade" role="dialog">
回答by T.J. Crowder
How to remove class with media queries
如何使用媒体查询删除类
You don't. Instead, you define new rules that apply to the class which do the styling you want done. Media queries can't add or remove classes to elements, they merely change what rules apply to elements.
你没有。相反，您定义了适用于执行您想要完成的样式的类的新规则。媒体查询不能向元素添加或删除类，它们只是更改应用于元素的规则。
回答by Ahmadbaba46
$(window).resize(function(){
If($(window).width()<500){
$('.fade').removeClass('fade');
}
});
回答by Michael Mammoliti
With CSS only you can't remove it from the DOM.. But.. You can overwrite it. Simply define that class in the right place.
仅使用 CSS，您无法将其从 DOM 中删除……但是……您可以覆盖它。只需在正确的位置定义该类。
Resize the HTML box in jsFiddle.
在 jsFiddle 中调整 HTML 框的大小。
DEMO: jsFiddle
演示：jsFiddle
HTML
HTML
<div id="myModal" class="modal fade" role="dialog">
CSS:
CSS：
.fade {
opacity: 0;
transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
}
.fade:hover {
opacity: 1
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.post_profile_image{
width:35px;
height:35px
}
.fade{
transition: none;
-o-transition: none;
-webkit-transition: none;
}
}
