CSS: layout fisso o mobile? [chiuso]

Question

La mia domanda ruota attorno a CSS Fixed Layout vs a Float Layout che si estende per riempire la larghezza del browser.

In questo momento il problema che sto riscontrando è il ridimensionamento del masthead a seconda della larghezza della pagina (qualcosa che capisco non è possibile data l'attuale implementazione del browser CSS3's background-image: size; ). A questo punto, mi sento come se avessi raggiunto un punto morto: rielaborare il sito per utilizzare un layout CSS fisso o mantengo il layout corrente e provo a espandere l'immagine della masthead per riempire la maggior parte dello spazio fornito ? Inoltre, quali sono i vantaggi e gli svantaggi di passare a un layout a larghezza fissa e le altre implicazioni (invisibili) dell'uso di un layout rispetto a un altro?

Il sito in questione verrà fornito come commento a questa domanda: non voglio essere visto come un tentativo di aumentare il traffico verso di esso.

Modifica: altri pensieri?

Answer 1

Che ne dici di rivelare più o meno l'immagine mentre il browser viene ridimensionato, piuttosto che ridimensionare l'immagine? Non è esattamente lo stesso effetto, ma è un modo semplice per riempire un intero spazio con un'immagine.

Supponiamo, a titolo di esempio, che l'immagine di sfondo del tuo masthead contenga un logo di qualche tipo sopra, diciamo, una fotografia di uno skyline della città. Nel complesso, è largo 1600 px. Il logo si trova a sinistra dell'immagine mentre il paesaggio urbano si estende all'estrema destra. E supponiamo che il tuo markup sia più o meno così:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

Possiamo impostare l'elemento #page su una elastic e applicare un'immagine di sfondo a l'elemento #masthead:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

Quello che succede qui è che l'elemento #masthead si espanderà alla larghezza dell'elemento #page, che sarà da qualche parte tra 800px e 1600px di larghezza (incluso) a seconda della larghezza della finestra del browser. Quando l'elemento #page ha una larghezza di 800 px, viene visualizzato solo l'800 pixel più a sinistra dello skyline; quando è largo 1600 px, vedi l'intero skyline. In questo modo il tuo logo è sempre visibile e quando il browser viene ridimensionato, viene rivelato più del paesaggio urbano.

Questo richiede di avere un'immagine più grande per iniziare (almeno larga quanto la tua larghezza massima, se si diventa elastici), ma il risultato è una testa d'albero che avrà un bell'aspetto, indipendentemente dalle dimensioni, senza fare affidamento su, come menzionato strager, algoritmi di ridimensionamento delle immagini dei browser.

Answer 2

Che tipo di immagine è? Qualche parte è ripetibile? A volte usando due livelli, uno o il tag per un elemento ripetuto dell'immagine e un altro per l'elemento fisso.

Possiamo vedere un esempio? Sarebbe più facile ottenere la risposta giusta per il tuo problema.

Answer 3

Se stai tentando di espandere l'immagine di sfondo alla larghezza della tua pagina, è meglio usare un layout di dimensioni fisse poiché non esiste un metodo cross-browser per espandere un'immagine di sfondo a dimensioni variabili che sono dipende dalla risoluzione dei visitatori.

I layout a larghezza fissa offrono maggiore flessibilità per il progettista, ma non per il visitatore. Se si crea un layout largo X pixel, è possibile ottimizzare il sito Web pixel per pixel a proprio piacimento mentre & Quot; float & Quot; i layout (li chiamo layout liquidi) si basano interamente su valori percentuali e pertanto differiscono da computer a computer. Lo trovo difficile perché puoi testare il layout sullo schermo e non sapere come appare su qualcun altro, e (per esempio) un margine di 20px ha un effetto maggiore su un layout a larghezza fissa 768px o 960px di quanto non faccia su uno schermo per computer liquido da 1280 px.

Il principale svantaggio, IMO, per un layout a larghezza fissa è il fatto che appare troppo piccolo su schermi più grandi e troppo grande su schermi più piccoli. 768 px era un layout a larghezza fissa abbastanza standard, ma ora è troppo piccolo quando il mondo si allontana da 800x600. Ora 960px è abbastanza standard, che è troppo grande per 800x600 ma ancora troppo piccolo su 1280x1024.

Tutto dipende dal tuo pubblico e da come il tuo sito si adatta. Alcuni layout possono essere resi liquidi e funzionano perfettamente, mentre altri devono essere corretti (come quello che hai descritto).

Answer 4

Perché non utilizzare un tag < img > per l'immagine dell'intestazione (masthead) invece di utilizzare un'immagine di sfondo?

Suggerirei di non ridimensionare l'immagine dell'intestazione; la maggior parte dei browser è terribile nel ridimensionamento delle immagini (cosa è il vicino più vicino cosa?) e non sarà bello per molte persone.

Sono io stesso per layout fluid / float / liquid. In effetti, la maggior parte dei miei siti utilizza un'unica colonna, quindi non devo preoccuparmi di tutte le complessità & Quot; normale & Quot; layout del sito hanno.

Answer 5

È generalmente una cattiva idea creare un layout in cui le colonne di testo si espandano nel browser. Il testo diventa difficile da leggere se le linee diventano lunghe. Consiglio di sistemarmi su un fisso con per la colonna di testo, forse largo circa 50 lettere.