Stile CSS - percentuali contro em vs px?

Question

Dopo aver letto diversi articoli sul web sono un po 'confusi su quando utilizzare percent, em o px per div´s, input´s, font´s, buttons e così via ...

Per il sito sto lavorando in poi Non dovrei aggiungere un design reattivo, e da quello che ho capito da articoli diversi che percentuali è la strada da percorrere per elements e div´s. Ma poi mi confondo perché sto pensando che dovrei essere in grado di ottenere un design reattivo anche se utilizzo il layout px per impostare una larghezza, un'altezza diversa in px a seconda della risoluzione del dispositivo/dello schermo ...?

E c'è una buona pratica per quando usare cosa? E non solo per fontsize, ma per div´s e anche altri elementi?

Answer 1

Per quanto ho potuto realizzare, i valori length in %, em, px, pt sono solo diverse misure si deve applicare per fare le cose nel layout CSS. Non c'è alcuna regola per usarli.

Il fatto è che è difficile dirti cosa devi fare con loro perché è difficile dire cosa devi ottenere in ciascuno dei tuoi layout. I layout riguardano la creatività e non puoi semplicemente fissare un approccio per adattarli a tutti.

Quello che posso fare è dirvi le basi, ma probabilmente già lo sanno: avrete alcuni valori assoluti (cm, mm, in, pt, pc, px) e alcuni valori relativi (basato su testo: em, ex, ch, rem; basa viewport: vw, vh, vmin, vmax). Le misure relative cambiano mentre cambiano "base".

Personalmente mi sono ritrovato a utilizzare molti dei comuni, quelli assoluti. Ma non possiamo mai dire cosa stai cercando di ottenere. Quindi è bello avere a portata di mano il official documentation in modo da poter trovare sempre il modo migliore per ciascuna delle sfide del tuo layout.

Fortuna!

Answer 2

Il vantaggio principale dell'utilizzo di em è che la dimensione effettiva dipende dalle impostazioni dell'utente, ovvero la dimensione del carattere predefinito. Quindi gli utenti che preferiscono il tipo grande aumentano questo valore. Le percentuali creano un tipo di layout statico, anche se di dimensioni flessibili, combinato con altezza minima e massima/larghezza questo può portare a risultati silenziosi. Se vuoi avere un layout flessibile con colonne, in modo che ci sia solo un piccolo schermo, due su più grandi e tre in massimo dovrai usare anche i float combinati con (min/max) larghezza/altezza.

In generale, non inizierei a mettere in discussione l'unità migliore, inoltre vorrei iniziare un concetto di base su come dovrebbe funzionare il layout. A volte risulta che l'utilizzo di javascript per l'intero Layout è la soluzione più rapida e affidabile, quindi l'unità da utilizzare dipende dal tuo obiettivo speciale e una »questa è la soluzione migliore« non esiste per questa domanda in generale, che è quale stato.

Saluti ..