Qual è l'unità preferita quando si esegue il responsive design?

Question

Sto costruendo un sito Web reattivo e mi chiedo quale unità dovrei usare? Ho visto molti siti che usano pixel (px) per le misurazioni e ne ho visto alcuni usando percent (%). Esiste un modo preferito o giusto per fare un design responsivo?

Ho trovato che la percentuale è difficile da utilizzare, poiché rende i calcoli difficili e ho finito con valori come 2.754% e così via quando si impostano larghezze/margini ecc. I pixel sembrano più semplici, è solo semplice aggiunta e sottrazione, ma ho letto che non è "a prova di futuro" o qualcosa del genere e non si ridimensiona correttamente se l'utente zooma nella finestra del browser. È ancora vero?

Se hai esperienza o esperienza, per favore condividi! Mi piacerebbe sentire cosa avete da dire voi ragazzi!

Grazie!

Answer 1

Utilizzare le percentuali insieme a larghezza min e larghezza massima in pixel. Questo arresta le percentuali rendendo le tue div troppo piccole o troppo grandi. es.

div { 
    width:100%; //full width of browser 
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding 
} 

Answer 2

Ovviamente è necessario utilizzare la percentuale. Ma con lo min-height, , min-width, max-width chiavi CSS.

Per la prossima generazione

vw e vh. Il vw è 1/100 della larghezza della finestra e il vh è 1/100th dell'altezza della finestra. Per reattività saranno le nuove unità.

Answer 3

Per disposizione tipo le cose come le dimensioni delle scatole, che si desidera utilizzare % perché in genere si hanno diverse colonne dimensionati come percentuale del loro genitore che impilare uno sopra l'altro a un certo punto di interruzione (width:100%) . Nessuna altra unità ti consentirà di riempire il 100% dello spazio come fa %.

Per padding/margins utilizzare em, normalmente si desidera spaziare gli elementi in relazione alla dimensione del testo. Con em (con un carattere 'M') si può facilmente dire che voglio circa 1 carattere di spaziatura qui.

Per confini è possibile utilizzare px o em, v'è una differenza però. Se vuoi che il tuo bordo assomigli a un pixel di larghezza su tutti i dispositivi, usa 1px. Ad esempio, potrebbe non essere un pixel su tutti i dispositivi, tuttavia i display ad alta densità convertono 1px in 2px. Se vuoi che il tuo bordo sia una dimensione basata sul tuo carattere, usa em.

Per font uso em (o %), l'uso di em trasporta attraverso genitori ai figli ed è solo una delle unità più bello di lavorare con più px.