JQuery -响应式设计(显示)

Question

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

我在html中写了所有需要的媒体，以便窗口加载特定的。css文件(根据屏幕宽度桌面/平板电脑/移动)。

台式机和平板电脑在设计上非常相似。只需要重新排列几个div，看起来就不错了。但是当涉及到移动设备时，我想改变导航器的外观。例如，在桌面中，它的内联块位于屏幕的中心。但是在手机上，我想要一种新的设计，比如下拉菜单。

所以我想在html中创建两个导航器，并在JQuery中编写一个代码来检查window.width。如果宽度将小于平板电脑窗口。宽度(应该是500px)，然后添加display:none;到桌面导航器并删除显示:无;从mobile-navigator。

Q1:这是正确的做法吗?代码div在html和使用JQ窗口。添加/删除显示的宽度?还是有更好的办法?我试着用谷歌搜索这个问题，但我找不到一个直接的答案。

第二季:这是我的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

我建议你看看Bootstrap (http://getbootstrap.com/)这是一个css和javascript框架与移动优先的方法。

要从bootstrap中删除某个div，您可以使用他们的响应实用程序(http://getbootstrap.com/css/#responsive-utilities-classes)例子:

<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>

Bootstrap使用它来确定xs, sm, md，…的大小

/* 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) { ... }