Qual è il punto su usando% unità in design reattivo?

Question

Sto riprogettando il mio sito perché sembra terribile su risoluzioni diverse (a parte i dispositivi), la maggior parte delle guide e dei tutorial si basano su % e em rispetto ai valori fissi. Sto ancora imparando questo, quindi sto leggendo tutto intorno.

Pensavo che questo avrebbe risolto la domanda con diverse dimensioni di display, ma ancora una volta: dobbiamo creare un po 'più di CSS per risolvere alcuni problemi specifici.

Se devo aggiungere query multimediali per dimensioni di visualizzazione extra, perché utilizzare% allora? Usa% davvero riduce la codifica? Va bene bisogno di aggiungere qualche css in più per alcune taglie o sto facendo qualcosa di sbagliato?

Grazie per qualsiasi consiglio!

Answer 1

Lo scopo dell'utilizzo delle dimensioni di em è quello di consentire alla base di escludere la scelta del font da parte dell'utente. Potrei usare una dimensione del carattere più grande perché ho un monitor enorme e una vista scarsa, mentre qualcun altro potrebbe preferire un font più piccolo. Usando le unità em, il tuo progetto accetterà entrambe le preferenze dei font e ridimensionerà di conseguenza, invece di forzare la dimensione del font a uno standard dato (ad esempio "font a 12 punti").

In modo simile, le unità di percentuale (%) consentono al progetto di rispondere a diverse dimensioni del browser. Utilizzato in combinazione con le unità em, questo consentirà agli elementi basati su testo di rispondere alle scelte arbitrarie delle dimensioni dei caratteri e agli elementi di layout per rispondere alle dimensioni arbitrarie dei browser.

È perfettamente accettabile progettare un singolo design reattivo per tutti i tipi di supporto. Media queries sono previsti quando si desiderano stili di visualizzazione diversi su dispositivi diversi, non per "supportare" dimensioni di visualizzazione differenti. Un esempio potrebbe essere l'uso di caratteri serif su supporti di stampa e caratteri sans-serif su supporti di visualizzazione, poiché gli studi di usabilità hanno dimostrato che questi volti di carattere sono preferiti per questi tipi di supporti.

Inoltre, consente di eseguire uno stile personalizzato per alcune situazioni come i dispositivi mobili, in cui si potrebbe voler considerare che l'utente ha una quantità limitata di larghezza di banda e può ridurre le immagini extra. O se si desidera visualizzare il contenuto in un layout completamente diverso per lo schermo microscopico offerto da alcuni telefoni.

Answer 2

% consente al sito di essere sensibile al metodo di visualizzazione dell'utente. Supponiamo che tu abbia un allo 100%. Riempirà l'intera sezione, indipendentemente dal fatto che sia su un telefono o sul desktop.

Va bene aggiungere anche CSS extra per le dimensioni. Per quanto ne so, è possibile avere alcuni elementi visualizzati in % e alcuni con un valore fisso px, anche se lo potrebbe essere il conflitto a seconda di come viene impostata la pagina o di cosa viene visualizzata.

Answer 3

Ad esempio.

L'intestazione del sito Web ha una larghezza di 950 px; Ma in un dispositivo mobile, può adattarsi a 450 px;

Quindi, si utilizza la query multimediale per riposizionare alcuni elementi e gestire alcuni problemi di dimensione e impostare la larghezza dell'intestazione su 450 px;

Tuttavia, se si utilizzano valori di%, è possibile impostare il div dell'intestazione in modo che abbia il 100% della larghezza di base nel relativo elemento principale. Quindi puoi solo cambiare il corpo o la larghezza del contenitore div, i bambini si adatteranno.

Answer 4

Diana,

Sono contento di aver trovato questa domanda. Ho letteralmente caricato il mio primo design reattivo che si basa al 90% su percentuali in termini di dimensioni e larghezza dei caratteri.

Partenza il seguito: http://www.noxinnovations.com/portfolio/responsive/

Ovviamente, non sembra incredibile, e l'immagine risulta modo fuori posto ... Ma mi faccia un favore e ridimensionare la finestra del browser, rendendo lentamente più piccolo e più piccolo. L'ho fatto impostando una larghezza percentuale!

Fidati di me, ho provato a eseguire questo test di progettazione reattivo con pixel e non si è rivelato troppo efficace. La larghezza percentuale garantisce che indipendentemente dalla risoluzione e/o dalle dimensioni in pixel (di per sé) il design soddisferà sempre le dimensioni dello schermo. Inoltre, non ho dovuto utilizzare una media query CSS3, ma suggerisco caldamente di utilizzare le media query CSS3 solo quando ne hai bisogno.

A mio parere, dovrei probabilmente avere una Media Query per uno schermo più grande.

Spero che questo ti aiuti tanto quanto mi ha aiutato! Grazie, Aaron