CSS - Percentuali o pixel?

Question

Uso CSS da molti anni e sono sempre stato un tipo "percentuale" di ragazzo, poiché in I definisco sempre altezze e larghezze utilizzando percentuali anziché pixel (tranne, ad esempio, quando si impostano cose come margini, spaziatura, ecc., nel qual caso utilizzo pixel).

vorrei fare qualcosa di simile:

body{ 
    height: 99%; 
    width: 99%; 
    margin-top: 10px; 
} 

ma vedo spesso esempi come questo:

body{ 
    height: 300px; 
    width: 250px; 
    margin-top: 10px; 
} 

mia domanda è questa: c'è qualche vantaggio di utilizzare uno sopra l'altro nel complesso, e se sì, quali sono?

Grazie.

Mick

Answer 1

Pagine Web mobili. % rock per quello. Come sarà (ovviamente) regolare per soddisfare.

Tuttavia quando si desidera una larghezza fissa per esempio un articolo di testo che si desidera visualizzare in un determinato modo, il px è il vincitore.

Entrambi hanno molti più e di meno di uno sopra l'altro :)

Answer 2

Se si desidera che gli oggetti siano della stessa dimensione, non importa quale, poi pixel (non influenzata da zoom o le dimensioni dello schermo). Può anche esaminare l'uso di EM. Penso che gli EM siano nel mezzo, in cui sono influenzati dallo zoom, ma non dalle dimensioni dello schermo.

Answer 3

Le ragioni in abbondanza! Le larghezze percentuali sono molto utili quando si tratta di ridimensionare gli elementi rispetto a qualcos'altro (per esempio la dimensione del browser). Puoi cambiare la tua pagina in modo dinamico per adattarla a circostanze diverse. I pixel d'altra parte sono utili quando hai bisogno di misure di precisione che non cambieranno su di te. Alcune persone (ad esempio io) usano sia i pixel che le percentuali per posizionare gli elementi come li vuoi. Altri (ad esempio persone diverse da me: P) ti diranno che questo è stupido.

Answer 4

Uso pixel sul mio sito Web e mantengo una larghezza massima di 1000 px. Mio sito visualizza correttamente sul mio netbook 11" , ma non fare molto bene con i dispositivi mobili, ma questo è ciò che questo è per:

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" /> 

Trovo lo sviluppo di siti web in percentuali molto tempo intenso, di dover prendere in considerazione tutti i re eventi -sizing, come ad esempio:

overflow:scroll; 

pixel e percentuali entrambi hanno i loro vantaggi, ma direi che i pixel sarebbero una scelta migliore a causa di precisione, affidabilità, ed è più facile sviluppare anche un'altra cosa da considerare. sono i pixel e le percentuali per i caratteri. Ecco la mia regola generale:

• Se si sta sviluppando un sito Web con percentuali, utilizzare le percentuali per il carattere, per i motivi del mantenimento delle proporzioni corrette.
• Se si sviluppa un sito Web con pixel, utilizzare i pixel per il carattere.

Se si dispone di persone che potrebbero dover ingrandire il carattere, è sempre preferibile utilizzare le percentuali per il carattere.

Answer 5

% sono la strada da percorrere in un mondo moderno come la grafica vettoriale. Man mano che gli schermi diventano più grandi o più piccoli puoi scalare correttamente indipendentemente dalla risoluzione.

Answer 6

Ovviamente non c'è giusto o sbagliato. È piuttosto una questione di fluidità.

È più facile posizionare gli oggetti l'uno rispetto all'altro con pixel e controllare l'altezza e la larghezza esatte.

Lo scaling degli oggetti è più semplice con percentuali. Il 50% della larghezza della finestra sarà sempre metà della finestra, indipendentemente dalle dimensioni dello schermo.

Answer 7

in stile interiore proprietà piano è in % ti conta come 200px*0.3=60px

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30%; <<<<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

top qui è 30px. così sarà così com'è.

#outer{ 
 
    border-style: dotted; 
 
    position: relative; 
 
    height: 200px; 
 
} 
 
#inner{ 
 
border-style: double; 
 
    position: absolute; 
 
    top: 30px; <<<<<<<<<<<< 
 
}

<div id="outer"> 
 
outer 
 
<div id="inner"> 
 
inner 
 
</div> 
 
</div>

Answer 8

utilizzare entrambi = D

Con si può sempre combinare utilizzando sia se siete confusi su di esso)

calc() è un modo CSS nativo di fare semplice matematica nel CSS come rimpiazzo per qualsiasi valore di lunghezza (o praticamente qualsiasi valore numerico).

Ha quattro semplici operatori matematici: add (+), subtract (-), multiply (*) e divide (/).

.my-class { 
    widht: calc(100% - 20px); 
    height: calc(50% + 10px); 
} 

Il supporto del browser è sorprendentemente buono. Can I use...

Lettura utile: CSS-Tricks

Answer 9

mi piace percentuali troppo, ma in alcuni casi non fa quello che mi aspetto. Se per esempio ho due pulsanti che condividono la stessa riga con larghezza massima: 50% e la finestra corrente non è un numero pari, uno di essi sarà sempre leggermente più grande.