Miscelazione per cento e fissa CSS

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

Applicare percentuale fissa e CSS insieme? Potrà causare problemi, e, se sì di che tipo?

  • Fa miscelazione degradare browser render prestazioni?
  • Sarà miscelazione dare risultati strani in carico iniziale con progressiva di rendering dei browser?

Qui sotto è solo un dumbed-down esempio di utilizzo misto, potrebbe essere qualsiasi miscela. Non sto cercando per la convalida dell’esempio. Ho sentito dire che non si dovrebbe mai fare quello che ho nell’esempio riportato di seguito, quindi sto cercando di scoprire se si usano i CSS in questo modo è un problema.

Esempio mix di utilizzo:

<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>
  • Io uso il mix di tutti e di solito non è un problema. Un sacco di siti web ad alto traffico lo uso e non ho mai sentito nessuno dire “non farlo.” Se si adatta alle tue esigenze, andare per esso 🙂
  • il problema di prestazioni sarebbe sul lato client, con una pagina con un i big data, del numero di righe e tabelle nidificate e roba del genere, non sarà un problema per un alto traffico del sito web, se le sue pagine contengono una tabella o due a seguito di tale approccio.

 

5 Replies
  1. 34

    +1 Buona domanda. Si può desiderare di avere uno sguardo a questo articolo: “A larghezza fissa, il liquido e il layout elastico” Si va su layout a larghezza fissa (em) e layout elastici (%), e se si fa clic per andare alla pagina successiva cerca ‘Elastico-liquido ibrido’ – in cui la larghezza: è impostato in un modo, con max-width: impostare gli altri. So che l’articolo linkato sopra non è esattamente quello che hai chiesto, ma è un esempio di un uso misto all’interno di un unico stile CSS.


    Edit: Dopo alcuni ulteriori letture che ho fatto trovare un bel paio di pareri discordi sull’argomento. Ho trovato diversi articoli che ha tenuto l’idea che “semplicemente non è possibile mescolare i pixel e le percentuali“. Anche se, per la maggior parte, questi siti sono stati abbastanza datato. Quando ho ristretto la ricerca a solo articoli che sono stati presentati negli ultimi anno le cose sono cambiate un po’. C’erano ancora un paio di pareri contro la miscelazione, ma che in genere non ha spiegato perché, e sembrava del “ho sempre sentito che era una cattiva idea” varietà.
    La maggior parte delle più recenti informazioni che ho trovato sull’argomento, sembra indicare che la percentuale di miscelazione con larghezze fisse è perfettamente accettabile pratica, come lungo come si fa con una comprensione dei risultati.

    vedere:

    Full Disclosure: sono stato un mixer per molti anni, senza davvero sapere se il mio approccio è stato corretto.’

  2. 5

    Questo dovrebbe aiutare a chiarire quando è ok per mix percentuale di pixel e quando non lo è.

    Di miscelazione per cento e la larghezza dei pixel non sarebbe un problema quando lo si fa come nel tuo 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, 25% su .container sarà meno di 250 px e causare .cell overflow .container.

    Diventa anche un problema quando si mescolano per cento e pixel nel caso di larghezza più imbottitura;

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

    Questo causerà .cell avere una larghezza di 320px (100% + 10 punti + 10 punti), e di overflow .container.

    Fammi sapere se che aiuta a chiarire le cose.

    • Aiuta, ma cerco davvero come la miscelazione può confondere il caricamento iniziale di rendering progressivo e l’impatto sulle prestazioni del browser.
    • Se ci pensate, qualsiasi elemento con percentuale di larghezza è contenuto in alcuni, all’interno di “fisso” di larghezza elemento html. Se non altro, potrebbe essere più difficile per un vecchio browser a livello di percentuali (25% del 25% del 50% di html) che mettere per cento larghezza raggio di larghezza fissa (25% di 300px).
  3. 4

    Il modo in cui hai va bene. Ogni cella calcola 75px. Le uniche volte in cui si deve stare attenti con le percentuali è quando l’arrotondamento a calci.

    Nel tuo esempio, se sei contenitore 303px, ogni cellula, di valutare per 75.66666 px e tondo fino a 76px, per un totale di 304px che vorresti essere più grande che il contenitore. Che un pixel causa tutti i tipi di problemi.

  4. 1

    Non riesco a trovare alcuna prova documentata con casi di test per dimostrare questo. Hai potuto punti dove hai letto questo?

    Trovo mescolare le due cose abbastanza utili e vedo un sacco di out in the wild in fama /siti ad alto traffico anche.

    L’unico problema che colpisce soprattutto i vecchi browser e IE è di arrotondamento. Leggi qui:

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

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

    • Non ho alcuna prova, è un po ‘ come il Bigfoot. 🙂 Sto cercando di sfatare il mito, se si tratta di una, da parte di persone che possono sapere; perché io di sicuro non.

Lascia un commento