Подключение стилей в адаптивном дизайне

[alleclf]

Сейчас использую конструкцию в виде:

<link href="/css/style_480.css" rel="stylesheet" media="only screen and (max-width:480px)"><link href="/css/style_800.css" rel="stylesheet" media="only screen and (max-width:800px)"><link href="/css/style_1200.css" rel="stylesheet" media="only screen and (max-width:1200px)">

Я не совсем понимаю как работают эти функции, ведь если экран с разрешением, например 320 пх, так он же подходит под все описания и получится что загрузятся все 3 стиля.

 

 

Как можно сделать конструкцию "ОТ и ДО" и для любых устройств?

 

То есть, для разрешения экрана:

- от 240 до 480 - грузить стиль 1

- от 480 до 800 - грузить стиль 2

- от 800 до 1200 - грузить стиль 3

- и т.д.

 

Пробовал написать вот так, но что-то не работает:

<link href="/css/style_480.css" rel="stylesheet" media="all and (min-width:240px) and (max-width:480px)">