Я видел много сайтов, которые реагируют как на настольные браузеры, так и на мобильные телефоны, я работаю над сайтом, и у меня есть следующие настройки таблицы стилей: (Веб-сайт Hicks Design - хороший пример того, чего я хочу достичь, если он вам нужен). )

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

Однако моя таблица стилей, приведенная выше, работает только в настольных браузерах. (протестировано с Android Firefox и браузером Android по умолчанию на Sony Xperia Ray)

Правила сайта дизайна Hicks очень похожи на мои, однако они используют min и max, но ни один из них, по-моему, не работает как в мобильных, так и в настольных браузерах. (Я планирую оптимизировать свои медиа-запросы больше, я просто пытаюсь заставить основы работать так, как я хочу в данный момент).

Если я использую max-device-width вместо max-width, он становится отзывчивым в мобильных браузерах, но не в настольных браузерах ...

Я пробовал следующее, чтобы обойти проблему:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

также:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

Однако я не думаю, что что-то из этого является правильным, поскольку панель инструментов веб-разработчика для Firefox жалуется на это. Я также попробовал несколько вариантов вышеупомянутых правил, но все еще не могу заставить его работать.

Из того, что я понимаю, max-width считывает ширину области просмотра (скажем, ширину окна браузера), а max-device-width - фактическую ширину экрана, который вы используете для просмотра сайта. - Я запутался, почему max-width не читает ширину браузера мобильного телефона.

Я думаю, что, возможно, я упускаю что-то очевидное в медиа-запросах здесь ... Кажется, не имеет смысла, что если я хочу, чтобы мой сайт реагировал на браузеры для ПК и мобильных устройств, я должен сделать копию всех моих медиа-запросов и просто изменить запрос от 'screen and (max-width)' к 'screen и (max-device-width)' или наоборот. (который мне стыдно даже печатать как обходной путь здесь)

Как я могу объединить правила (max-width) и (max-device-width) или как этого добиться?

Если вы не хотите читать все вышеперечисленное:

Я использую @media screen и (max-width: 480px), однако кажется, что только @media screen и (max-device-width: 480px) работают на мобильных устройствах. Как я могу объединить оба эти правила для создания адаптивного дизайна в мобильных и настольных браузерах?