Hojas de estilo de pantalla y móvil
He revisado los temas de desbordamiento de pila en esta pregunta, así como algunos resultados de búsqueda de Google, pero parece que no puedo resolver mi problema.
He creado una hoja de estilo para dispositivos móviles (mobile.css) que es esencialmente una copia de mi main.css con cambios en muchos de los atributos. Cuando cargo solo mobile.css como la hoja de estilo, se ve muy bien en mi iPhone, tal como lo quiero. Sin embargo, cuando pongo ambos, obtengo una mezcla de ambos, pero más de main.css
¿Alguna idea de por qué?
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>