Помогите разобраться с @media screen

[Alfa2015]

Запуталась с @media screen

 

Эта строчка @media screen and (min-width: 320px) and (max-width: 480px) означает:

что стили будут применяться при минимальной ширине экрана 320px  и максимальной ширины 480px, я правильно понимаю?

 

Я проэксперементировала и получилось что эти стили применились к:

 

320 × 480 Телефон(портрет) 480 × 320 Смартфон (ландшафт) 480 × 800 Планшет (портрет)

 

Вопрос: как мне к ним применить разные стили.

 

Пробовала так, по отдельности: @media screen and (max-width: 320px) { ...}

@media screen and (max-width: 480px) { ...}

@media screen and (max-width: 800px) { ...} , но ничего не получается (стили применяются туда, куда не надо)

 

То есть, я хочу, чтобы к 320 × 480 Телефон(портрет) -- применялся один стиль

к 480 × 320 Смартфон (ландшафт) -- другой стиль

к 480 × 800 Планшет (портрет) -- третий стиль

Edited July 4, 2015 by Alfa2015

[afdw]

Есть ещё min-height и max-height. Их вам, похоже, и не хватает.

[web-tech]

вот здесь https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ есть примеры для разных устройств и в том числе и для portrait и для landscape, я думаю по примерам все станет ясно

Edited July 4, 2015 by web-tech

[Alfa2015]

Ага, спасибо.