Блог

Я разрабатываю приложение с использованием jQuery mobile, и я хочу иметь 2 дизайна / макета, 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;
    }
}