Javascript 当屏幕尺寸小于特定尺寸时隐藏 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13476267/
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
Hide div element when screen size is smaller than a specific size
提问by Brett Merrifield
I have a div element that I want to hide when the width of the browser is less than or equal to 1026px. Is this possible to do with the css: @media only screen and (min-width: 1140px) {}If it isn't possible with css, Is there any alternative?
我有一个 div 元素，当浏览器的宽度小于或等于 1026px 时，我想隐藏它。这是否可能与 css 相关： @media only screen and (min-width: 1140px) {}如果 css 不可能，是否有其他选择？
Extra info: When the div element is hidden, I don't want a blank white gap. I'd like the page to flow as it would if I deleted the div element entirely from the code.
额外信息：当 div 元素被隐藏时，我不想要一个空白的空白。我希望页面能够像从代码中完全删除 div 元素一样流动。
The div I am hiding is <div id="fadeshow1"></div>.
我隐藏的 div 是<div id="fadeshow1"></div>.
HTML5 Doctype.
HTML5 文档类型。
I used javascript to place a gallery into that div.
I want it to look like this when it is bigger than 1026px width:
我使用 javascript 将画廊放入该 div。
当它大于 1026px 宽度时，我希望它看起来像这样：
I want it to look like this when it is less than 1026px width:
当宽度小于 1026px 时，我希望它看起来像这样：
回答by Cerbrus
You can do this with CSS:
你可以用 CSS 做到这一点：
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
We're using max-width, because we want to make an exception to the CSS, when a screen is smallerthan the 1026px.
min-widthwould make the CSS rule count for all screens of 1026px width and larger.
我们使用max-width，因为当屏幕小于1026px时，我们想对 CSS 进行例外处理。
min-width将使 CSS 规则适用于所有 1026px 宽度和更大的屏幕。
Something to keep in mind is that @mediaqueries are not supported on IE8 and lower.
需要记住的是，@mediaIE8 及更低版本不支持查询。
回答by Andy
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
Any time the screen is less than 1026 pixels wide, anything inside the { }will apply.
任何时候屏幕宽度小于 1026 像素，里面的任何内容都{ }将适用。
Some browsers don't support media queries.You can get round this using a javascript library like Respond.JS
某些浏览器不支持媒体查询。你可以使用像Respond.JS这样的 javascript 库来解决这个问题
回答by Kabengwa Patrick
if you are using bootstrap u can just use the hidden-sm ( lg or md or xs) depending on what u want. u can then go into the css file and specify the percentages u want it to show on. in the sample below it will be hiding on large screens, medium ones and extra small ones but show on small screens by taking half of the screen.
如果您使用引导程序，您可以根据需要使用 hidden-sm（lg 或 md 或 xs）。然后您可以进入 css 文件并指定您希望它显示的百分比。在下面的示例中，它将隐藏在大屏幕、中屏幕和超小屏幕上，但通过占据一半屏幕显示在小屏幕上。
<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
回答by NaijaProgrammer
I don't know about CSS but this Javascript code should work:
我不知道 CSS 但这个 Javascript 代码应该可以工作：
function getBrowserSize(){
var w, h;
if(typeof window.innerWidth != 'undefined')
{
w = window.innerWidth; //other browsers
h = window.innerHeight;
}
else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
w = document.documentElement.clientWidth; //IE
h = document.documentElement.clientHeight;
}
else{
w = document.body.clientWidth; //IE
h = document.body.clientHeight;
}
return {'width':w, 'height': h};
}
if(parseInt(getBrowserSize().width) < 1026){
document.getElementById("fadeshow1").style.display = "none";
}
回答by JRulle
You simply need to use a media query in CSS to accomplish this.
您只需要在 CSS 中使用媒体查询即可完成此操作。
@media (max-width: 1026px) {
#fadeshow1 { display: none; }
}
Unfortunately some browsers do not support @media(looking at you IE8 and below). In those cases, you have a few options, but the most common is Respond.js which is a lightweight polyfill for min/max-width CSS3 Media Queries.
不幸的是，有些浏览器不支持@media（看看你的 IE8 及以下）。在这些情况下，您有几个选择，但最常见的是 Respond.js，它是用于最小/最大宽度 CSS3 媒体查询的轻量级 polyfill。
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
This will allow your responsive design to function in those old versions of IE.
*reference
这将使您的响应式设计能够在那些旧版本的 IE 中运行。
*参考
回答by vaibhav
This should help:
这应该有帮助：
if(screen.width<1026){//get the screen width
//get element form document
elem.style.display == 'none'//toggle visibility
}
768 px should be enough as well
768 px 也应该足够了
回答by TNCodeMonkey
The easiest approach I know of is using onresize() func:
我所知道的最简单的方法是使用 onresize() 函数：
window.onresize = function(event) {
...
}
回答by TNCodeMonkey
You have to use max-width instead of min-width.
您必须使用最大宽度而不是最小宽度。
<style>
@media (max-width: 1026px) {
#test {
display: none;
}
}
</style>
<div id="test">
<h1>Test</h1>
</div>
回答by Mirco
@media only screen and (min-width: 1140px)
should do his job, show us your css file
应该做他的工作，向我们展示你的 css 文件
