Design Fluido - L'obiettivo?

[vic.]

Salve a tutti ragazzi,

Da un po' di tempo a questa parte ho letto delle guide relative al cosiddetto design fluido, seppure non nego che i miei interrogativi in merito siano molti.
In realtà, in primo luogo, non capisco quale sia l'obiettivo finale:

-E dunque, vi chiedo, credo bene se credo che un design fluido serva a far si che immagini, div, e altri elementi di natura non scalabili si adattino alla risoluzione dell'utente?
-Nelle varie guide che ho letto si chiedeva, per verificare, di ridimensionare la finestra in larghezza oppure di ridimensionare il testo (rotellina), ebbene cosa si verifica facendo queste due azioni, qual'è il meccanismo alla base?
-Nel mio piccolo, facendo diverse prove, ho scoperto che la proprietà da modificare per far si che un'immagine si adatti alla finestra è min/max -width/heigth con valore espresso in % o em. (poiché u.d.m. relative), a queste aggiungo la proprietà (della specifica CSS3)

background-size:cover

. Il problema è che io vorrei avere immagini a tutto schermo (per larghezza) come ci sono nei siti moderni, ma quando imposto

width:100%

+

heigth: 100%

questo non avviene
-Come mai non avviene? Non dovrebbe rimanere a tutto schermo quell'immagine e come faccio a impostare che l'altezza dell'immagine dev'essere la propria, ma esprimendolo in %? esempio: immagine (20x20 px) definita con width e heigth entrambe 100% in modo che sia scalare .


Scusate per il numero consistente di domande, alcune un po' complicate da capire lo so, ma sono interrogativi che mi assillano :book:

 

[Jonn]

-E dunque, vi chiedo, credo bene se credo che un design fluido serva a far si che immagini, div, e altri elementi di natura non scalabili si adattino alla risoluzione dell'utente?

Scalabilità significa tutt'altro, un design fluido serve principalmente per avere un margine di risoluzioni che possono visualizzarlo senza errori grafici.
Se provi a guardare per esempio il mio sito web con un computer con risoluzione 800 x 600 vedrai che si vede tutto da schifo.
Questo perchè nel mio sito non ci sono dimensioni percentuali ma sono tutte fisse (in px).

-Nelle varie guide che ho letto si chiedeva, per verificare, di ridimensionare la finestra in larghezza oppure di ridimensionare il testo (rotellina), ebbene cosa si verifica facendo queste due azioni, qual'è il meccanismo alla base?

Si verifica che si deve vedere l'effetto delle dimensioni impostate in percentuali, un esempio ce l'ho già fatto (anche se vecchio) a questa pagina:
- Questa pagina!
Se stringi la finestra vedi che il riquadro della stessa non va a coprire la pagina tagliandola, ma la "schiaccia", in questo modo (tralasciando che la pagina fa schifo) è però visualizzabile anche su dispositivi con schermo molto piccolo.

Il problema è che io vorrei avere immagini a tutto schermo (per larghezza) come ci sono nei siti moderni, ma quando imposto

width:100%

+

heigth: 100%

questo non avviene
-Come mai non avviene?

Va vista la pagina, o almeno il sorgente, in ogni caso ricorda che le dimensioni percentuali sono anche relative, questo significa che se metti un div nel body con width: 80%; e dentro a questo un'immagine con width: 100%;, l'immagine sarà larga il 100% si, ma del div che lo contiene, quindi nel browser vedrai un'immagine larga l'80% della finestra e che si restringe a ridursi della suddetta finestra.
Se vuoi invece che non ci siano margini bianchi nello sfondo dell'intera pagina con i bordi della finestra imposti nel CSS:

body {margin: 0; background: url('path/img.jpg'); background-size: cover;}

come faccio a impostare che l'altezza dell'immagine dev'essere la propria, ma esprimendolo in %? esempio: immagine (20x20 px) definita con width e heigth entrambe 100% in modo che sia scalare .

Se dichiari solo il WIDTH l'height te lo imposta in proporzione.
Se per esempio dichiari che l'immagine sia larga il 50% l'height automaticamente sarà anch'esso 50% perchè se non è dichiarato riconosce che l'immagine ha i lati uguali, quindi assegna all'altezza lo stesso valore della larghezza.

Se lo fai con un'immagine per esempio che ha l'altezza maggiore della larghezza, sempre non dichiarando l'height ma solo il width, noterai che l'height rimarrà sempre proporzionale e che quindi l'immagine si può rimpicciolire ed ingrandire ma non si schiaccerà o allungherà mai né in larghezza, né in altezza.

 

[vic.]

Grazie mille Jhonny.
Gentilissimo...

Comunque volevo sapere la differenza tra layout elastico e flessibile?
Riguardo al tuo sito, quindi, tu hai usato un posizionamento con coordinate? (esempio {position:absolute; left:xx; top: xx;} )

P.S: anche io uso background-size:cover che è una proprietà della specifica CSS3, giusto? Ma, dunque, anche questa risente del ridimensionamento come lo hai definito tu, per cui se imposto solo width, allora l'heigth va in automatico?

 

[Jonn]

Riguardo al tuo sito, quindi, tu hai usato un posizionamento con coordinate? (esempio {position:absolute; left:xx; top: xx;} )

No, ho usato il posizionamento centrato non mettendo al div container il float:left; e mettendo il margin: 00px auto 00px auto; che lo centra automaticamente.

P.S: anche io uso background-size:cover che è una proprietà della specifica CSS3, giusto? Ma, dunque, anche questa risente del ridimensionamento come lo hai definito tu, per cui se imposto solo width, allora l'heigth va in automatico?

Si.