JQuery - Отзывчивый дизайн (Показать)

Question

Я пытаюсь создать свой первый веб-сайт RWD, но теперь, когда я начал писать мобильный CSS, я думаю, что правильное время, чтобы спросить, является ли то, куда я направляюсь, является правильным способом.

Я написал в html все средства, необходимые для того, чтобы окно загрузило конкретный файл .css (в зависимости от ширины экрана рабочего стола/планшета/мобильного телефона).

Настольные и планшеты довольно похожи, когда дело доходит до дизайна. Просто несколько перестроек div, и это выглядит хорошо. Но когда дело доходит до мобильного, я бы хотел изменить внешний вид навигатора. Например, на рабочем столе его встроенный блок, ориентированный на экран. Но на мобильном я хотел бы иметь своего рода новый дизайн, скажем, dropmenu.

Так что, хотя я и создаю как навигаторы внутри html, так и внутри JQuery напишу код, который будет проверять window.width. если ширина будет меньше, чем табло window.width (это будет 500 пикселей), то для добавления дисплея: none; на настольный навигатор и удалить дисплей: нет; от мобильного навигатора.

Q1: Правильно ли это делается? код divs в html и использовать 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 использует это, чтобы определить размеры хз, см, мкр, ...

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