Percentuale o pixel per i layout?


9
  • Cosa userete per un layout di pagina Web? Percentuale o pixel?
  • Quando si dovrebbe usare uno sopra l'altro?

3
Né - usali ;-)
Armand,

(Questo è "em" il termine tipografico, non "em" il tag HTML, nel caso in cui qualcuno si muova.)
Frank Shearar il

4
@Alison: non vuoi dire "Neanche - usa em s"?
Alan Pearce,

1
Piattaforma di destinazione? L'ovvio sarebbe percentuale, ma sfortunatamente dato che la maggior parte delle risorse grafiche non si ridimensiona bene, consiglierei i pixel
dvhh,

Hmmmm @Alan potresti avere ragione :—)
Armand

Risposte:


11

Quale unità usi dipende interamente da ciò che vuoi realizzare. Le unità più utilizzate nei layout Web sono:

  • px - assoluto; un pixel
  • pt: assoluto; 1/72 di pollice, circa 1,3 px per supporti schermo
  • em - relativamente alla dimensione del carattere principale; 1.0em = dimensione di un carattere (larghezza della M maiuscola)
  • % - relativo al genitore

Si utilizza px per dimensioni che rimangono costanti, ad esempio un bordo 1px.
Li usi per dimensioni che dovrebbero seguire la dimensione del carattere, ad esempio un margine 3.0em.
Si utilizza% per le dimensioni che dovrebbero occupare una percentuale del genitore, ad esempio una larghezza del 50%.

Per i layout di pagine Web si utilizzano normalmente pixel o percentuali a seconda se si desidera un layout fisso (pixel) o un layout fluido (percentuale).


Un pò da scegliere: un em è la larghezza, non l'altezza, di una M maiuscola nella tipografia tradizionale. Non sorprende che un en sia la larghezza di un maiuscolo N. Un ex è la misura dell'altezza basata sul carattere.
Stan Rogers,

@Stan Rogers: non ho mai detto che fosse l'altezza di una M maiuscola, qualcun altro l'ha modificata.
Guffa,

Ciò che conta è che le informazioni fornite siano corrette quanto possiamo, non chi le ha inserite. (Non riesco ancora a modificare le risposte non wiki di altre persone, quindi i commenti sono i migliori che posso fare.)
Stan Rogers,

La dimensione in punti non è assoluta se non si conosce l'esatta risoluzione del dispositivo di output e il fattore di scala impostato dall'utente (UI indipendente dalla risoluzione, "caratteri grandi" di XP, ecc.). Inoltre, iPhone 4 è 326 dpi, che è considerevolmente più di 72 dpi
JBRWilkinson

@JBRWilkinson: è una misura assoluta per ogni dato dispositivo. È assoluto come l'unità px; la dimensione di un pixel differisce anche per ogni dato display.
Guffa,

1

Tendo a usare i pixel per le dichiarazioni di larghezza (che generalmente sono fisse), ma sono per l'altezza. In questo modo il layout si ridimensiona verticalmente, ma mantiene la coerenza orizzontale.


1

Uso le dimensioni relative / proporzionate quando possibile. Trovo che renda molto più semplice apportare modifiche ai layout in un secondo momento. Inoltre, l'utilizzo di una dimensione relativa a un elemento genitore significa che una modifica al genitore si riduce facilmente.

Tradizionalmente, l'uso di dimensioni relative consentiva anche alle pagine di apparire corrette in varie risoluzioni ed era particolarmente utile per lo zoom del browser o le dimensioni minime dei caratteri. Ma i browser moderni ora gestiscono il ridimensionamento estremamente bene con layout specifici per pixel, anche ingrandendo le immagini se necessario. Quindi è diventato meno importante utilizzare dimensioni relative.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.