JQuery - 响应式设计（显示）

Question

我正在尝试创建我的第一个RWD网站，但现在我已经开始编写移动CSS了，我认为它正确的时间询问我的标题是否是正确的方式。

为了让窗口加载特定的.css文件（根据屏幕宽度桌面/平板电脑/手机），我在html中写入了所需的所有媒体。

桌面和平板电脑在设计上非常相似。只有几个div重排，它看起来不错。但是当谈到移动时，我想改变导航仪的外观。 例如在桌面的内联块中居中屏幕。 但是在移动设备上，我想要一种新的设计，一个dropmenu可以说。

所以我虽然在html中创建了两个导航器，并且在JQuery中编写了一个代码来检查window.width。如果宽度将小于平板电脑window.width（这将是500px），然后添加display：none;到桌面导航器并删除显示：无;从移动导航器。

Q1： 这是正确的做法吗？在html中编码div并使用JQ window.width添加/删除显示？或者，还有更好的方法？我试图谷歌这个问题，但我无法找到一个直接的答案。

Q2： 这是我的JQ代码。虽然由于某种原因它不起作用，我是否在正确的道路上？

checkWidth(); 

    $(window).resize(checkWidth); 

    var $window = $(window); 


    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 500) { 
      alert("works"); 
     // $(".mobHome").removeClass("noShow"); 
     } else { 
$(".mobHome").addClass("noShow"); 
} 
    } 

Answer 1

你只需要这在你的CSS

@media screen and (max-width:550px) { 
    .mobHome { display:block; } 
} 
@media screen and (min-width:551px) { 
    .mobHome { display:none; } 
} 

Answer 2

我建议你看一看引导（http://getbootstrap.com/） 这是一个CSS和JavaScript框架，移动第一种方法。

<div class="hidden-xs"> 
    This is not visible on small screens. 
</div> 
<div class="visible-xs-block"> 
    This is only visible on small screens. 
</div> 

引导使用它来确定XS的尺寸，SM，MD，...

：

要显示在引导你可以使用他们的响应公用事业（http://getbootstrap.com/css/#responsive-utilities-classes） 例如删除某个DIV

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }