Quiero cargar un archivo CSS diferente si el tamaño de la ventana es inferior a 500 px. yo tengo

<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />

Pero main.css siempre anula el mobile.css a pesar de que la ventana tiene menos de 500 px. Que pasa

EDITAR: lo cambié a

<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />

Pero cuando reduzco la ventana a menos de 500 px, el inspector de elementos muestra que el mobile.css se está cargando, pero cada elemento está siendo anulado por las especificaciones de main.css.