[html] ridimensionare sito

[soundsgood]

Ciao ragazzi,

vorrei sapere se esiste un metodo per ridimensionare un sito nel seguente modo:

mettere tutto il sito dentro un div html e ridimensionare, tramite css o altro modo il contenuto del div

ringrazio chi vorra suggerire qualcosa

[vhost87]

Originariamente inviato da soundsgood

Ciao ragazzi,

vorrei sapere se esiste un metodo per ridimensionare un sito nel seguente modo:

mettere tutto il sito dentro un div html e ridimensionare, tramite css o altro modo il contenuto del div

ringrazio chi vorra suggerire qualcosa

Oddio, non stiamo parlando di un'immagine...
Puoi inglobare tutto il tuo layout in un div e dare una dimensione a questo div.
Non è detto che tutto il contenuto si ridimensioni perché dipende da diversi fattori; ad esempio mettiamo tu voglia ridimensionare il tuo layout con una larghezza massima di 800px. Bene, crei il tuo div, di larghezza 800px e ci inglobi tutto il resto del layout.

Se nel tuoi layout c'è qualsiasi altro elemento html la cui larghezza supera gli 800px (o anche la somma di piu elementi le cui larghezze, in totale, superano gli 800px) sei fregato, il div di base si estenderà.

La direttiva max-width su IE non va. Quindi non prenderla nemmeno in considerazione.

Poi se esponi bene il tuo problema vediamo di darti una mano

[soundsgood]

diciamo che ho fatto il layout di un sito avendo uno schermo del portatile di risoluzione 1680 x 1050

mi sono accorto che non sarebbe il massimo per schermi con risoluzioni piu basse, perche tutta la pagina non entrerebbe nella finestra del browser.

vorrei rimpicciolire la visualizzazione del sito nella maniera in cui si rimpicciolisce cliccando su "ctrl" + "-"

ovvero quando l'utente lo apre si vede piu piccolo, mantenendo pero tutte le proporzioni (qualsiasi sia il contenuto)

[MaxArt]

Devi fare attenzione a quando progetti il tuo sito. La struttura HTML presuppone che si possa adattare a tanti sistemi diversi, quindi devi ragionare subito in quell'ottica.
Quindi, la cosa migliora è utilizzare il più possibile le percentuali quando indichi larghezze, altezze e posizioni, e questo è già un passo avanti. Usa i pixel SOLO per "misure piccole", ad esempio la larghezza di un separatore.
Anche le immagini, in via di massima, potrebbero dover essere ridimensionate.

Poi c'è la questione dei font. Qui il problema è più serio, perché non c'è alcun modo di impostare la dimensione in base alla risoluzione dello schermo. HTML e CSS non "sanno" la dimensione in pixel della finestra: puoi reperirla solo con Javascript.
Potresti, ad esempio, scrivere

<body onload="this.style.fontSize = (this.offsetWidth / 100) + 'px';">

e lasciare che tutti gli elementi della pagina abbiano dimensioni di testo "ereditate" o comunque non assolute (con percentuale o con le parole "large", "small" e così via).
Nel codice che ho riportato, sul tuo schermo la dimensione del testo diventa 16.8 pixel, mentre sul mio sarebbe 12.8 (cambia per '100' con un altro valore, se ti va).

Eventualmente puoi settare anche un evento onresize sul body in modo che anche il testo si sistemi quando viene ridimensionata la pagina.

Internet Explorer ha un'estensione ai fogli di stile, la proprietà zoom che farebbe proprio al caso tuo:
http://msdn.microsoft.com/en-us/libr...89(VS.85).aspx
Però, come puoi immaginare, è supportata solo da IE.

[soundsgood]

vorrei un modo di dichiarare le dimensioni (di test, immagini, div) in modo che passando da una risoluzione ad un altra dello schermo questi elementi si adattino (piu è grande la risoluzione piu gli elementi si ingrandiscono). Sottolineo che per dimensione non intendo dimensione della finestra ma dello schermo. Infatti voglio che ridimensionando la finestra non succeda niente (nessun effetto fluido), ma voglio che la dimensione vari in base alla risoluzione dello schermo.

Sapete come fare?

[vhost87]

Originariamente inviato da soundsgood

vorrei un modo di dichiarare le dimensioni (di test, immagini, div) in modo che passando da una risoluzione ad un altra dello schermo questi elementi si adattino (piu è grande la risoluzione piu gli elementi si ingrandiscono). Sottolineo che per dimensione non intendo dimensione della finestra ma dello schermo. Infatti voglio che ridimensionando la finestra non succeda niente (nessun effetto fluido), ma voglio che la dimensione vari in base alla risoluzione dello schermo.

Sapete come fare?

Usando le dimensioni in percentuali.

[soundsgood]

il fatto è che quando si usano le percentuali, se ridimensiono la finestra si ridimensiona il sito, infatti la percentuale si basa sulla dimensione della finestra.

Vorrei che le dimensioni del sito si basano sulla grandezza della risoluzione dello schermo

[MaxArt]

Originariamente inviato da soundsgood

il fatto è che quando si usano le percentuali, se ridimensiono la finestra si ridimensiona il sito, infatti la percentuale si basa sulla dimensione della finestra.

Vorrei che le dimensioni del sito si basano sulla grandezza della risoluzione dello schermo

Allora devi fare un lavoro completamente diverso.
La risoluzione dello schermo la conosci con screen.width e screen.height in Javascript. In base ad essi ti costruisci il sito.
La tecnica più semplice secondo me consiste nel definire una grandezza del testo e poi costruire TUTTO il sito usando em come unità di misura.

[vhost87]

Originariamente inviato da soundsgood

il fatto è che quando si usano le percentuali, se ridimensiono la finestra si ridimensiona il sito, infatti la percentuale si basa sulla dimensione della finestra.

Vorrei che le dimensioni del sito si basano sulla grandezza della risoluzione dello schermo

Ho afferrato male io, o meglio, mi sono perso qualcosa.
Per i font puoi usare sempre le percentuali, per le dimensioni invece devi usare le proprietà JS, una cosa che sarebbe meglio evitare.