Come gestire diverse dimensioni dello schermo/risoluzione dello schermo durante lo sviluppo di un sito?

Question

Mi piacerebbe sviluppare un sito usando jQuery che funzioni con tutti i principali browser. Ho pensato di iniziare con un layout di base (un'intestazione, un paio di schede con contenuto e piè di pagina). Mi chiedo come devo creare questo layout per supportare diverse risoluzioni dello schermo, dimensioni dello schermo o dimensioni della finestra. Dovrei lavorare in pixel/punti/percentuali quando definisco la larghezza e l'altezza dei componenti? Ci sono plugin jQuery che possono aiutarmi con questa attività? Grazie !

Answer 1

Esistono numerose soluzioni a questo problema, ma dipendono principalmente dal tipo di contenuto che si desidera condividere tramite il sito (ovvero video incorporati o immagini che possono avere dimensioni limitate) e l'aspetto grafico stai andando per.

Per i layout Web che funzionano bene in più browser e in una vasta gamma di dimensioni della finestra, si dovrebbe guardare "Liquid Layouts". Di seguito sono riportati alcuni collegamenti a esercitazioni su questi layout.

• Liquid layouts the easy way | Max Design
• Liquid CSS Layouts - Design Alternative to Table Based Websites
• Fixed Width Layouts Versus Liquid Layouts

È inoltre possibile utilizzare Javascript (tra cui jQuery) per modificare lo stile/contenuti in base alla risoluzione della finestra (per esempio, il passaggio da un multi- layout della colonna in un layout a colonna singola per schermi più piccoli, come i telefoni cellulari). Questo è chiamato "Contenuto adattivo".

• Adaptive CSS-Layouts: New Era In Fluid Layouts?

Answer 2

Questo è un semplice script che ho usato in passato (utilizzando jQuery):

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "css/blue-800.css"; 
if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; } 
if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; } 
if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; } 
$("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />'); 
} 

I valori della larghezza di pagina utilizzati nel codice sono arbitrarie e sono stati ottimizzato per lavorare con un sito specifico, quindi sentitevi liberi di regolarli come desiderato.

Inoltre, all'interno di ciascuno di questi file CSS c'è solo una minima quantità di CSS che imposta la larghezza dei contenitori/wrapper principali e persino l'immagine di sfondo.

---

Aggiornamento n. 2: Se si sta tentando di mantenere un codice HTML valido. Quindi è possibile aggiungere tutti i fogli di stile CSS nella testa della pagina (includere un attributo title in ognuna):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" /> 
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" /> 

quindi utilizzare questo script. Potresti ottenere un lampo di bianco se hai incluso immagini di sfondo nel tuo CSS, quindi assicurati di impostare uno stile CSS di base.

$(document).ready(function(){ 
$('body').append('<div id="screencss"></div>'); 
adjustCSS(); 
$(window).resize(function(){ adjustCSS() }); 
}) 
function adjustCSS(){ 
var pageWidth = $(window).width(); 
var sizeSelected = "blue1"; 
if (pageWidth > 510) { sizeSelected = "blue2"; } 
if (pageWidth > 580) { sizeSelected = "blue3"; } 
if (pageWidth > 900) { sizeSelected = "blue4"; } 
if (pageWidth > 1010) { sizeSelected = "blue5"; } 
if (pageWidth > 1420) { sizeSelected = "blue6"; } 
var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled'); 
$('head').find('link[title]').not(lnk).attr('disabled', 'disabled'); 
} 

Answer 3

jQuery non può aiutarti a farlo. Devi imparare il codice HTML e CSS di base. Usa Javascript e jQuery se ne hai bisogno, non usarlo solo per usarlo. Dovresti lavorare con pixel o percentuali quando si tratta di dimensioni sul web. I punti sono per la stampa. Le dimensioni dei caratteri devono essere impostate in EM o pixel.

Un layout fisso è il più comune per le normali pagine Web e utilizzando le strutture di griglia come 960gs, si ha un modo semplice per rendere le proporzioni un aspetto decente pur continuando a supportare la maggior parte delle risoluzioni dello schermo. È anche molto, molto più semplice, adattare la grafica a un layout a larghezza fissa, e allo stesso tempo rendere la pagina facile da usare.

Tenere presente quando/se si utilizzano percentuali che le righe di testo più lunghe di circa 600-800 pixel sono difficili o lente da leggere. Aka con un'area di contenuto dell'80% potrebbe essere una buona idea per un viewport largo 1000px, ma se hai una finestra di 1900px, il sito diventa quasi inutilizzabile.

E uno di solito non imposta esplicitamente un'altezza sulle cose, poiché l'altezza aumenta automaticamente all'aumentare del contenuto del contenitore. Certo, puoi impostare l'altezza su certe cose, ma tutto dipende da cosa, davvero.

Quindi, l'utilizzo di una larghezza dinamica o fissa dipende tutto dal contenuto.

Answer 4

Sulla base delle vostre esigenze descritte, vi consiglio vivamente di controllare il file css "Grids" dalla libreria di Yahoo User Interface (YUI), potete trovare il file e la documentazione qui: http://developer.yahoo.com/yui/grids/.

La configurazione di base del pacchetto di griglie comprende un'intestazione, un corpo e un piè di pagina. È possibile rimuovere l'intestazione e/o il piè di pagina, se lo si desidera. Il corpo può essere diviso usando un modello di griglia annidato e una varietà di modelli sono inclusi.

Personalmente, avvio tutte le pagine HTML/CSS che faccio con il file "reset-fonts-grids" combinato da YUI. Fornisce un file di ripristino css cross-browser, il file grids e alcune classi standardizzate per i caratteri.