CSS和JQUERY问题

嗨有没有人知道如何在css媒体查询中做出jQuery的工作，或者当屏幕尺寸小于一定大小时。我需要将我的导航标记关闭，但仅当我的网站处于移动视图时才会关闭。我已经设置了一个CSS媒体查询，当设备宽度小于1050像素时，该设置即会生效。CSS和JQUERY问题

我该怎么做？

感谢

来源

2015-10-06 Andeb-autos

你有没有考虑过使用bootstrap？ http://getbootstrap.com/ – stackoverfloweth

不，我已经听说过它，但我已经得到了导航的整个代码，所以我想坚持：d –

bootstrap可以让你访问一些非常有用的类，比如'hidden- xs'元素不会显示在小于768px的屏幕上或'visible-xs'只显示在小于768px的屏幕上 – stackoverfloweth

我不能评论还没有，但为了留在你的HTML我可以为您提供这样的事情：

if($(window).width() < 480) { 
    // Put your script in here 
}

而且看一看Modernizr的。如果你对Bootstrap不熟悉，那么像我提供的简单解决方案应该为你处理这笔交易。 ;）

来源

2015-10-06 14:42:54 sperovic

让我试试这个请 –

我不能让这个工作 –

你能粘贴脚本吗？我所给的是我大部分时间使用的懒惰解决方案。 – sperovic

<!Doctype html> 
<html> 
<style> 

header{ 
    width:100%; 
    background:black; 
} 

ul{ 
list-style:none; 
} 

li{ 
float:left; 
} 

a{ 
display:block; 
padding:10px; 
text-decoration:none; 
color:orange; 
} 
</style> 

<body> 
<header> 
    <div class="Menu_bar"> 
    <ul> 
     <li><a href="#"> Hme</a></li> 
     <li><a href="#"> About </a></li> 
     <div class="clearFix"></div> 
    </ul> 
    </div> 
</header> 
</body>

来源

2015-10-06 15:29:58

这里是我发现了什么工作对我来说：

$(document).ready(function() { 
// This will fire when document is ready: 
$(window).resize(function() { 
    // This will fire each time the window is resized: 
    if($(window).width() >= 1050) { 
     // if larger or equal 
     $('nav').show(); 
    } else { 
     // if smaller 
     $('nav').hide(); 
    } 
}).resize(); // This will simulate a resize to trigger the initial run.

}）;

来源

2015-10-06 15:36:33

CSS和JQUERY问题

回答

相关问题