JQuery - 响应式设计（显示）

Question

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

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

台式机和平板电脑在设计方面非常相似。只是几个 div 重新排列，它看起来不错。但是在移动方面，我想改变导航器的外观。 例如，在桌面中，它的内联块以屏幕为中心。 但在移动设备上，我希望有一种新设计，比如说下拉菜单。

所以我想在 html 中创建两个导航器，并在 JQuery 中编写一个检查 window.width 的代码。如果宽度小于平板的 window.width（即 500px），则添加 display:none;到桌面导航器并删除显示：无；来自移动导航器。

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

第二季度： 这是我的 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 框架，采用移动优先方法。

要在引导程序中从显示中删除某个 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) { ... }