Html 删除某些屏幕尺寸的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17762354/
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
Remove element for certain screen sizes
提问by sam_7_h
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove()and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
我目前正在使用媒体查询创建响应式网页设计。对于移动设备，我想删除我的 JS 滑块并用其他东西替换它。我已经查看.remove()了 JQuery 库中的其他一些内容，但是这些内容必须在 HTML 中实现，我想不出从 css 角度解决的方法。
回答by Daniel Gimenez
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
你需要删除它们，还是只是隐藏它们？如果只是隐藏没问题，那么您可以将媒体查询与display:none：
#mySlider{
display: block;
}
@media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
回答by The Alpha
You can hide an element and show another depending on screen size using media query from css, this is from one of my live projects (I use this to show/hide icon)
您可以使用来自 的媒体查询隐藏一个元素并根据屏幕大小显示另一个元素css，这是来自我的一个实时项目（我用它来显示/隐藏图标）
@media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
回答by user2515479
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
不是 100% 确定你的意思。但是我创建了一个“no-mobile”类，我将它添加到不应在移动设备上显示的元素中。在媒体查询中，我将 no-mobile 设置为显示：none;。
@media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
回答by Butani Vijay
You can also use jquery function addClass()and removeClass()or removeAttr()to fulfill your purpose.
您还可以使用 jquery 函数addClass()和removeClass()或removeAttr()来实现您的目的。
Example:
例子：
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
或者您也可以使用媒体查询如下：
#mySlider{
display: block;
}
@media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
