С медиазапросами CSS вы можете использоватьmax-device-width для определения ширины устройства (например, устройства iPhone или Android) и / илиmax-width который нацелен на ширину страницы.

Если вы используетеmax-device-width, когда вы измените размер окна браузера на рабочем столе, CSS победитне может измениться, потому что ваш рабочий стол неизменить размер.

Если вы используетеmax-widthКогда вы изменяете размер окна браузера на рабочем столе, вам могут показываться ориентированные на мобильные устройства стили, такие как сенсорные элементы и меню, и тому подобное.

Ориентация на определенные браузеры (и устройства?) Теперь не рекомендуется, и вы должны быть немного более независимы от того, на что ориентируетесь. Это относится и к медиа-запросам?

Почему вы нацелены один на другой? Какой из них рекомендуется?

Это пример медиазапроса, который я использую на рабочем сайте:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

Я склонен использовать обаmax-device-width а также .max-width