У вас может быть 1 макет для мобильных телефонов, а другой для планшетов с jQuery mobile?

#html #jquery-mobile #mobile #tablet

#HTML #jquery-mobile #Мобильный #планшет

Вопрос:

Я разрабатываю приложение с использованием jQuery mobile, и я хочу иметь 2 дизайна / макета, 1 для мобильных устройств, а другой для планшетов. Возможно ли это? если да, то как? Это какой-то код?

Спасибо! Ной

Комментарии:

1. Вы бы просто использовали медиа-запросы CSS, полностью независимые от библиотеки jQuery.

2. Спасибо! Как бы я это сделал?

3. Я добавлю это в ответ

Ответ №1:

Развивая мой комментарий выше, вы бы просто настроили свой CSS-файл с медиа-запросами, чтобы изменить макет в зависимости от размера окна браузера. Медиа-запросы выглядят так:

 /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    **PUT YOUR MOBILE STYLES HERE**
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    **PUT YOUR TABLET STYLES HERE**
}
 

Вы можете изменить минимальную / максимальную ширину в соответствии с вашими потребностями.

Допустим, у вас была кнопка с классом donate . На мобильном устройстве вы хотите, чтобы кнопка занимала 100% ширины содержащего div, но на планшете вы хотите, чтобы ее ширина составляла 300 пикселей. Вот как вы бы настроили медиа-запросы:

 /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .donate {
       width:100%;
    }
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .donate {
       width:300px;
    }
}
 

Комментарии:

1. Хорошо, спасибо! Итак, я должен просто поместить это в отдельный файл css и связать его с HTML-страницей?

2. Он может быть в вашем основном файле CSS, но обычно рекомендуется поместить его в отдельный файл, чтобы ваши медиа-запросы были отделены от ваших глобальных стилей.