Как правильно обработать device width в media queries?

Question

[optimismous]

На макете 4 состояния лейаута. Сверху подписано на каждым состоянием Device width: 320, затем соответственно 640, 980 и 1024.

Я его сверстал с использованием вот брейкпоинтов, подобных этим:

media all and (min-width: 639px) {
.slogan__text {
font-size: 1.5rem;
line-height: 150px;
padding-left: 52px; } }
media all and (min-width: 979px) {
.slogan__text {
font-size: 2rem;
line-height: 233px;
padding-left: 84px; } }
media all and (min-width: 1023px) {
.slogan__text {
font-size: 2.2rem;
line-height: 245px;
padding-left: 86px; } }

А когда стал тестировать в Хроме, со включенным режимом эмуляции мобильных устройств, оказалось что разрешение у устройства достаточно велико и показывает многоколоночную версию для 980 пикселей, при этом device width у него 320. После этого я попробовал в запросе указать вместо min-width min-device-width, но это не помогло, стала отображаться мобильная версия в любом случае (т.е. версия по умолчанию без применения медиа запосов). Помогите пожалуйста разобраться с версткой под мобильные.
Вот моя верстка, буду благодарен за помощь и фидбек.

Answer 1

[WhiteSama]

Ну во первых, надо прописать мета-тэг примерно такой(гугл в помощь):

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

Указывать device-width границами, а не отдельно:

media all and (min-width: 639px)  and (max-width: 979px){
.slogan__text {
font-size: 1.5rem;
line-height: 150px;
padding-left: 52px; } }