我有一个 div 元素,当浏览器的宽度小于或等于 1026px 时,我想隐藏它。这是否可能与 css 相关: @media only screen and (min-width: 1140px) {}
如果 css 无法实现,是否有其他选择?
额外信息:当 div 元素被隐藏时,我不想要一个空白的空白。如果我从代码中完全删除了 div 元素,我希望页面能够流动。
我隐藏的 div 是<div id="fadeshow1"></div>
.
HTML5 文档类型。
你可以用 CSS 做到这一点:
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
我们使用max-width
,因为我们想在屏幕小于1026 像素时对 CSS 进行例外处理。
min-width
将使 CSS 规则适用于所有宽度为 1026 像素或更大的屏幕。
需要记住的是,@media
IE8 及更低版本不支持查询。
@media only screen and (max-width: 1026px) {
#fadeshow1 {
display: none;
}
}
只要屏幕宽度小于 1026 像素,屏幕内的任何内容都{ }
将适用。
如果您使用的是引导程序,您可以根据您的需要使用 hidden-sm(lg 或 md 或 xs)。然后您可以进入 css 文件并指定您希望它显示的百分比。在下面的示例中,它将隐藏在大屏幕、中屏幕和超小屏幕上,但在小屏幕上显示时会占据屏幕的一半。
<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
我不了解 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";
}
您只需要在 CSS 中使用媒体查询即可完成此操作。
@media (max-width: 1026px) {
#fadeshow1 { display: none; }
}
不幸的是,有些浏览器不支持@media
(看看你的 IE8 及以下)。在这些情况下,您有几个选择,但最常见的是 Respond.js,它是一个用于最小/最大宽度 CSS3 媒体查询的轻量级 polyfill。
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
这将允许您的响应式设计在那些旧版本的 IE 中运行。
*参考
@media only screen and (min-width: 1140px)
应该做他的工作,给我们看你的css文件
这应该有助于:
if(screen.width<1026){//get the screen width
//get element form document
elem.style.display == 'none'//toggle visibility
}
768 px 也应该足够了
您必须使用最大宽度而不是最小宽度。
<style>
@media (max-width: 1026px) {
#test {
display: none;
}
}
</style>
<div id="test">
<h1>Test</h1>
</div>