Я видел много сайтов, которые реагируют как на настольные браузеры, так и на мобильные телефоны, я работаю над сайтом, и у меня есть следующие настройки таблицы стилей: (Веб-сайт 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)

Дизайн сайта ХиксПравила очень похожи на мои, однако они используют 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) и (max-device-width) или как этого добиться?

Если ты'Не буду читать все вышеперечисленное:

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