Sto imparando i CSS e stavo leggendo domande relative alle dimensioni dei font Relative vs Absolute su StackOverflow. Mi sono imbattuto in due thread.Dimensioni dei caratteri relative ingannevoli sugli elementi figlio?
1. In un thread (CSS font size: relative vs. absolute values. Which to use?), una delle risposte è in realtà una domanda che non è stato risposto: [quote]
domanda, molti qui dicono che sono solo per Pt stampare. Ma non è bello avere una semplice capacità di rendere il testo la dimensione desiderata velocemente senza ricordare quale DIV ha ciò che Em o% valore. Ad esempio, quando si dispone di:
<body>
<div id="box1">
test text sample1
<div id="box2">
test text sample2
<div id="box3">
test text sample3
<div id="box4">
test text sample4
</div>
</div>
</div>
</div>
so che è una sorta di struttura di strano, ma diciamo che un layout ha bisogno di una struttura come quella per scopi grafici e immagini CSS stratificazione. Quindi mi piacerebbe creare box1 font = 100%, box2 = 1.2em. box3 = .8em, e box4 = 1.6em
Ora, il problema è che Em dalla casella 1 trasferisce anche a tutti i suoi figli, correggimi se ho torto, quindi significa che box2 non è esattamente 1.2em, e nel momento in cui arriviamo alla dimensione del carattere della casella 4 è davvero difficile dire di cosa si tratta. Mentre quando usiamo Pt o Px rimane il modo in cui vogliamo che rimanga.
Tuttavia, le dimensioni Px sono inflessibili e mi piace rendere i caratteri più grandi nel menu del mio browser quando mi siedo molto lontano dallo schermo. Ammettiamolo, è conveniente. Quindi la dimensione Px è fuori. Allora perché non usare Pt? Quanto è grande la differenza del browser?
2. Un altro filo ha la stessa domanda (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) con numeri, calcoli - - più esplicativo, senza una risposta adeguata:
Ad esempio, se ho:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
ed io abbiamo intestazioni/paragrafi all'interno del mio tavolo-cellule, so che posso evitare di aggravare i caratteri-formati dal seguente:
td h2, td h3, td p { font-size: 1em }
che risulterebbe nelle intestazioni/paragrafi nelle mie celle di tabella con dimensione font di 1.3em (quella del td).
Ma quello che sto cercando è un modo carino e pulito per ogni elemento figlio di avere la sua dimensione originale, non quella del genitore.
Mi piacerebbe davvero evitare di fare quanto segue (e ovviamente mi piacerebbe evitare di usare px):
td h2 { font-size: 1.54em } // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em } // 1.3 x 0.92 ~ 1.2
Per chiunque abbia familiarità con meno, sto usando questo e pensato che avrei dovuto essere in grado di usarlo per fare i calcoli per me, ad es. utilizzando funzioni di accesso:
td h2 { font-size: h2['font-size']/td['font-size'] }
Questo almeno sarebbe utilizzare i valori originali per fare il calcolo, ma si sente altrettanto goffa come il sopra e oltre, sembra meno non supporta più funzioni di accesso in ogni caso.
Questo sembra così semplice nel concetto, mi sembra che la risposta mi stia fissando in faccia, ma ho battuto la testa contro questo per un po 'e non riesco a trovare la risposta da nessuna parte.
Si prega di aiuto! A questo punto, se qualcuno mi dice che non può essere fatto e che è OK andare avanti e usare i valori dei pixel, li crederò molto felicemente!
Potrebbe essere ovvio ora che cosa la mia domanda è ... C'è un modo migliore di utilizzare dimensioni relative dei caratteri (o di qualsiasi dimensione relativa - come larghezza, altezza, ecc - è per questo), senza gli elementi figli che vengono effettuati dall'elemento padre?
costa usare troppi relativi caratteri-formati in CSS dire caricamento della pagina lento (almeno rispetto all'utilizzo di valori assoluti) in quanto richiedono una maggiore elaborazione da fare? –
Potrebbe tecnicamente caricare più lentamente, ma il computer di calcolo che sta per essere troppo veloce, non importa probabile che a meno che non si sta facendo dell'ordine di migliaia di volte. Il tuo più grande problema è con a) manutenibilità (tenere traccia di ciò che le dimensioni sono in realtà) e b) disegno complessivo (la maggior parte dei disegni sono più efficaci quando ci sono solo poche variazioni in cose come dimensioni o colore). Scrivere il codice per utilizzare le best practice HTML avrà probabilmente un impatto maggiore sulla velocità di caricamento rispetto all'utilizzo di ems vs pixel. – Shauna