miscelazione per cento e fisso CSS

Question

Questo è un duplicato da UI.StackExchange.com:
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Si dovrebbe mai applicare la percentuale e CSS fisso insieme? Causerà problemi e se sì quali tipi?

• Il mix di degrado browser rende le prestazioni?
• Il missaggio darà risultati strani sul carico iniziale con i browser a rendering progressivo?

Di seguito è riportato un esempio dumbed-down di utilizzo misto, potrebbe essere una combinazione qualsiasi. Non sto cercando la convalida dell'esempio. Ho sentito che non dovresti mai fare ciò che ho nell'esempio qui sotto, quindi sto cercando di scoprire se usare CSS in questo modo è un problema.

Esempio utilizzo mix:

<style> 
.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:25%; 
} 
</style> 

<table class="container"> 
    <tr> 
     <td class="cell"><td> 
     <td class="cell"><td> 
     <td class="cell"><td> 
     <td class="cell"><td> 
    </tr> 
</table> 

Answer 1

+1 Buona domanda. Si consiglia di dare un'occhiata a questo articolo: "Fixed-width, liquid, and elastic layout" Va su layout a larghezza fissa (em) e layout elastici (%), e se si fa clic per andare alla pagina successiva si guarda a 'ibrido elastico-liquido' - dove width: è impostato in un modo, con max-width: imposta l'altro. So che l'articolo collegato sopra non è esattamente quello che hai chiesto, ma è un esempio di uso misto all'interno di un singolo stile CSS.

---

Edit: Dopo qualche ulteriore lettura ho trovato una un bel paio di pareri contraddittori sull'argomento. Ho trovato diversi articoli che sostenevano l'idea che "you just can’t mix up pixels and percentages". Anche se, per la maggior parte, questi siti erano piuttosto datati. Quando ho ristretto la ricerca solo agli articoli che sono stati pubblicati nell'ultimo anno, le cose sono cambiate un po '. C'erano ancora alcune opinioni contrarie al mescolare, ma in genere non spiegavano perché, e sembravano della varietà "Ho sempre sentito che era una cattiva idea". La maggior parte delle informazioni più recenti che ho trovato sull'argomento sembra indicare che la percentuale di mixaggio con larghezze fisse è una pratica perfettamente accettabile, , a condizione che venga effettuata una comprensione dei risultati.

vedere:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (giugno 2009)
• "For A Beautiful Web: Changing Man Layout" ...

Full Disclosure: 'corretto' Sono stato un mixer per molti anni, senza davvero sapere se il mio approccio è stato

Answer 2

non riesco a trovare alcuna prova documentata con casi di test per dimostrare questo. Puoi indicarci dove leggi di questo?

Trovo che la combinazione dei due sia molto utile e la vedo molto in natura anche su siti di fama/traffico elevato.

L'unico problema che riguarda principalmente i browser meno recenti e IE è l'arrotondamento. Hanno un letto qui:

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

Answer 3

Il modo in cui ce l'hai va bene. Ogni cella calcola a 75 px. Le uniche volte che devi fare attenzione alle percentuali è quando l'arrotondamento entra in gioco.

Nel tuo esempio, se il tuo contenitore era 303 px, ogni cella calcolerebbe 75,66666 px e arrotondare fino a 76 px, per un totale di 304 px che sarebbe più grande del contenitore. Questo pixel causa tutti i tipi di problemi.

Answer 4

Questo dovrebbe aiutare a chiarire quando è ok mescolare percentuale e pixel e quando non lo è.

La miscelazione di percentuale e larghezza di pixel non sarebbe un problema quando lo si fa come nell'esempio;

.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:25%; 
} 

Quando diventa un problema è quando si inverte l'ordine;

.container 
{ 
    width:25%; 
} 
.cell 
{ 
    width:250px; 
} 

In questo caso, se la finestra del browser (o il genitore di .container) è inferiore a 1000px, il 25% sul .container sarà inferiore a 250 px e causare .cell traboccare .container.

Diventa anche un problema quando si mischiano percentuali e pixel nel caso di larghezza più riempimento;

.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:100%; 
    padding: 10px; 
} 

Ciò causerà .cell avere una larghezza di 320 px (100% + 10px 10px +), e troppopieno .container.

Fammi sapere se questo aiuta a chiarire le cose.

Answer 5

Dalla ricerca che ho fatto, sembra che il tuo target come CSS (id, classe, universale ... ecc.) Sia più importante nelle prestazioni di rendering del browser.

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering