Cambiare foglio di stile di un intero sito web

[Bertallo]

Buonasera a tutti è tutto il giorno che provo a venirne a capo con pochi risultati quindi ho pensato di sottoporvi il problema per vedere se ricevo qualche consiglio:
Sto costruendo un sito che vorrei fosse ottimizzato per Computer, Tablet e Smartphone. Per i primi 2 il codice HTML è il medesimo ma fa riferimento a 2 diversi fogli di stile CSS che attribuiscono alle stesse voci valori diversi in modo da avere il sito rimpicciolito per la versione Tablet, mentre per smartphone volevo fare un sito completamente diverso.
Ho inserito i fogli CSS nelle varie pagine nel seguente modo:

<link rel="stylesheet" href="CSS/desktop.css" media="screen">
<link rel="stylesheet" href="CSS/tablet.css" media="screen and (max-device-width:1024px)">

Così che il sito si adatti automaticamente alla risoluzione dello schermo ma vorrei lasciar all'utente la possibilità di passare da una versione all'altra. Ho risolto in questo modo per ogni singola pagina

<a href="#" class="change-css" rel="CSS/tablet.css" >Tablet</a> 
<a href="#" class="change-css" rel="CSS/desktop.css">Desktop</a>

Ovviamente però quando entro in un'altra pagina del sito questa fa riferimento al foglio CSS in base alla risoluzione, anche se l'utente aveva scelto di visualizzare con l'altra. Qualche consiglio?