Question

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

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

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

所以我虽然在html中创建了两个导航器，但在JQuery中编写了一个代码来检查window.width。如果宽度将小于平板电脑window.width（即500px），则添加display：none;到desktop-navigator并删除display：none;来自mobile-navigator。

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

我建议你看一下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) { ... }

JQuery - 响应式设计（显示）

2 个答案: