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?

[Mich_]

Puoi usare le variabili di sessione?
(fanno parte della programmazione lato server, e la sintassi dipende pertanto dal CMS eventuale che usi o dal llinguaggio del tuo server - maggiori info nel forum relativo al "lato server")

Oppure puoi "portarti dietro" da una pag all'altra una variabile che setti una volta sola e poi interpreti con JS ad ogni caricamento di pagina.

La prima soluzione e` piu` professionale e carica meno sia il server che il client,
la seconda e` possibile solo quando il browser ha JS abilitato.

[gianwebby]

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?

Non è necessario per forza fare diversi css. Potresti usare le media queries e tutte dentro lo stesso css oppure uno skin.css e un responsive.css con media queries.

Per creare un sito responsive come questo: visita il sito