Смотрите на медиа запросы как на условия (по сути это они и есть).
@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px)
Можно прочитать как: "портретный режим и экран не больше 360px по ширине и 640px по высоте".
Сразу скажу, что orietation
вычисляется как раз по соотношению сторон, т.е. 360x640 - это будет portrait
, а 640x360 уже landscape
.
Конкретно в вашем условии есть ошибка: экран шире 360px, но меньше 640px по высоте, уже не попадает под данный запрос, чтобы попадал, следует перестроить условие вот так:
@media (orientation: portrait) and (max-width: 360px) or (max-height: 640px)
Тогда все экрана меньше 360px по ширине или 640px по высоте в портретном режиме будут попадать под условия.
...основные размеры для медиа-адаптации...
Они везде разные и зависят больше от дизайна.
Чаще всего я использую такие условия:
@media screen and (min-width: 1280px) {} /* ноутбук */
@media screen and (min-width: 1024px) {} /* планшет */
@media screen and (min-width: 768px) {} /* мобилка */
В последнем проекте был адаптив только под мобилку и использовался только один медиа запрос:
@media screen and (max-width: 768px) and (orientation: portrait)
Там использовался "адаптивный пиксель", по этому этого хватало.