caricare foglio di stile dinamicamente in base alla risoluzione del browser

**elektronoide** · 03-07-2015, 19:50

vorrei creare un foglio di stile per ogni risoluzione e vorrei che venga caricato con javascript dinamicamente in base alla risoluzione del browser, ho trovato un articolo su questo sito risalente al 2006 LINK , volevo capire se questo metodo oggi giorno e ancora valido e come o quali alternative si possono utilizzare per ottenere la selezione dinamica del foglio di stile, potete postare qualche esempio o segnalarmi dei link più aggiornati sull'argomento, grazie.

**cavicchiandrea** · 03-07-2015, 20:04

Se vuoi proseguire con i layout dinamici puoi proseguire con quello (i concetti non sono cambianti in tal senso) i cambiamenti ci sono a livello css con i layout responsive

**elektronoide** · 04-07-2015, 08:48

grazie mille per la rapidità della risposta, il mio intendo era quello di usare entrambe le cose nel senso di creare un layout responsive e spezzare il codice in varie pagine css una per ogni risoluzione e poi fare in modo di far caricare dinamicamente lo stile in base a i controlli di quello script in javascript pensi possa andare bene cosi ? ti posto del codice per farmi capire meglio:

codice HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" type="text/css" href="main.css"  title="default"/>
        <link rel="alternate stylesheet" property="stylesheet" type="text/css" href="400.css" title="400" />
        <link rel="alternate stylesheet" property="stylesheet" type="text/css" href="1024.css" title="1024" />
        <link rel="alternate stylesheet" property="stylesheet" type="text/css" href="1440.css" title="1440" />        
        <link rel="alternate stylesheet" property="stylesheet" type="text/css" href="1920.css" title="1920" />
        
<script>
         
         function getBrowserWidth(){
        if (window.innerWidth){
            return window.innerWidth;}    
        else if (document.documentElement && document.documentElement.clientWidth != 0){
            return document.documentElement.clientWidth;    }
        else if (document.body){return document.body.clientWidth;}        
            return 0;
    }


function dynamicLayout(){
    var browserWidth = getBrowserWidth();

    //Load Thin CSS Rules
    if ((browserWidth >= 400)  &&  (browserWidth <= 1024)){
        changeLayout("400");
    }
    if ((browserWidth >= 1025)  &&  (browserWidth <= 1440)){
        changeLayout("1024");
    }
        if ((browserWidth >= 1441)  &&  (browserWidth <= 1599)){
        changeLayout("1440");
    }

    if ((browserWidth >= 1600) && (browserWidth <= 1921)){
        changeLayout("1920");
    }

}

function changeLayout(description){
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
       if(a.getAttribute("title") == description){a.disabled = false;}
       else if(a.getAttribute("title") != "default"){a.disabled = true;}
   }
}

    //addEvent()
    function addEvent( obj, type, fn ){ 
       if (obj.addEventListener){ 
          obj.addEventListener( type, fn, false );
       }
       else if (obj.attachEvent){ 
          obj["e"+type+fn] = fn; 
          obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
          obj.attachEvent( "on"+type, obj[type+fn] ); 
       } 
    } 
    
    //Run dynamicLayout function when page loads and when it resizes.
    addEvent(window, 'load', dynamicLayout);
    addEvent(window, 'resize', dynamicLayout);
</script>
    </head>
    <body>
        <header>
          <h1 style="color:lime;"><script>document.write(window.innerWidth);</script></h1>
        </header>
        
        <section>
         
        </section>
        
    </body>
</html>

**cavicchiandrea** · 04-07-2015, 10:22

Perdona ma non ti seguo, il concetto principale del responsive è proprio eliminare i vari css e tu vuoi fare il contrario ma.... contento tu!!

**elektronoide** · 04-07-2015, 11:32

io credo che a livello di organizzazione del codice in questo modo sia più leggibile in quanto vi è una pagina per ogni risoluzione, preferirei 10 pagine da 100 righe l'una anzi che una con 1000 righe di codice e poi in questo modo il client che visualizza la pagina scarica solo la pagina del css in base alla sua risoluzione quindi dovrebbè alleggerire il tutto, non tutti hanno la super fibra, tu cosa mi consigli fare ? posso ottenere la stessa cosa in altro modo ? sono inesperto ogni consiglio e ben accetto perche potrei sbagliarmi anche su tutto, il mio problema principale e che se scrivo il codice su un'unico foglio di stile diventa di una lunghezza sproporzionata e poi sono costretto a fare su e giù sul foglio per cercare gli elementi da modificare in questo modo i tempi per la scrittura e eventuale revisione si allungano in modo esponenziale, grazie.

**cavicchiandrea** · 04-07-2015, 13:54

Penso che non hai capito come funziona il responsive, e spiegarlo sarebbe complesso, studiati la guida che ti ho linkato

**lucavizzi** · 04-07-2015, 14:15

Se vuoi "dividere" gli stili delle varie risoluzioni puoi includerli nel seguente modo:

codice:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Usando le media queries direttamente nell'inclusione.

**elektronoide** · 04-07-2015, 20:13

grazie per le vostre risposte e il tempo a me dedicato ho risolto con il consiglio di lucavizzi che ha capito perfettamente ciò che cercavo, grazie.

Discussione: caricare foglio di stile dinamicamente in base alla risoluzione del browser

Strumenti discussione

Ricerca discussione

Visualizza

caricare foglio di stile dinamicamente in base alla risoluzione del browser

Permessi di invio