Se si mischia em con px?Misurazione su un sito web
Poiché em si basa sulla dimensione del carattere e px si basa sullo schermo.
Quindi la domanda si riduce a: come generare un'immagine quando la maggior parte del sito Web utilizza em?
I caratteri sono progettati per essere utilizzati in una gamma di dimensioni; quindi i motori di font non hanno problemi nel ridurli su e giù con precisione; tuttavia, le immagini hanno sempre utilizzato una misurazione rigida (indipendentemente dall'unità). Di conseguenza, il ridimensionamento tende a farli salire - a volte un litte, a volte molto. Questo è particolarmente vero quando il browser sta eseguendo il ridimensionamento. I browser non sono stati progettati come strumenti di fotoritocco.
Se stai creando menu basati su immagini e stai anche consentendo al menu di ridimensionare le dimensioni, forse una riprogettazione è in ordine. Se non una riprogettazione, forse un'eliminazione di un fattore (nessun ridimensionamento o nessuna immagine).
è possibile mescolare, ma non è raccomandato. Vorrei creare un elemento contenitore e usare px su quell'elemento se il genitore sta usando em.
Sarebbe il vantaggio per le persone di difficile di vedere. Avere il carattere più grande (da capire) ma l'immagine per loro sullo schermo sarebbe ragionevole da leggere e capire. –
sei sicuro di non voler usare solo le media query per ridimensionare un'immagine? – chovy
Normalmente, le immagini hanno dimensioni intrinseche in pixel. Ma puoi ridimensionarli in base alla dimensione del carattere, se sono ad es. pulsanti che dovrebbero corrispondere alla dimensione del testo. Basta creare un'immagine abbastanza grande (la riduzione graduale funziona molto meglio del ridimensionamento) e impostare ad es. l'altezza dell'immagine a 1.5em. Quando si imposta solo l'altezza e non la larghezza (o viceversa), i browser ridimensionano l'immagine in modo da preservare il rapporto larghezza: altezza.
Tuttavia, i pulsanti vengono creati meglio utilizzando i CSS, non le immagini. Le immagini di sfondo possono essere ridimensionate utilizzando le funzionalità CSS avanzate (background-size), che tuttavia hanno un supporto browser limitato.
Si noti che le immagini più grandi aumentano le dimensioni del file che causa tempi di download più lunghi e maggiore larghezza di banda necessaria. Inoltre, gli sprite CSS sono indispensabili, soprattutto quando si parla di pulsanti. (E il CSS3 è molto bravo nella creazione di pulsanti, angoli arrotondati, sfumature, ombre ...) –
Volevo mettere una taglia di 100, e il messaggio che vorrei dirmi come mescolare le unità di misura. Ma hey è lunedì e le cose stanno andando giù per la collina. Suicidio mercoledì! –
1em è uguale alla dimensione del carattere corrente. 2em significa 2 volte la dimensione del carattere corrente. Ad esempio, se un elemento è visualizzato con un carattere di 12 pt, quindi '2em' è 24 pt. La 'em' è un'unità molto utile in CSS, poiché può adattarsi automaticamente al carattere che il lettore usa
L''em' unità è uguale al valore calcolato della proprietà 'font-size' dell'elemento su cui è usato. L'eccezione è quando 'em' si verifica nel valore della proprietà 'font-size', nel qual caso si riferisce alla dimensione del font dell'elemento genitore. Può essere utilizzato per misure verticali o orizzontali
pixel (un punto sullo schermo del computer), px può essere ridimensionato anche in IE. em è una dimensione relativ alle dimensioni ereditate dal suo elemento genitore e in realtà ha lo stesso significato di%.
Il fatto è che è possibile specificare le dimensioni dei caratteri - vedere il menu delle opzioni per i dettagli completi. Se fossi incline come sono al momento (sto avendo difficoltà a vedere oggi) sarebbe bello aumentare le dimensioni del font e abilitare le immagini a crescere in base a –
non mi riferisco alla differenza –
tra em e px description –
personalmente li mescolo entrambi. Puoi farlo in entrambi i modi senza errori.
Dipende dalle preferenze e dalle pratiche. Ce ne sono anche altri: http://www.w3schools.com/cssref/css_units.asp
Trovo sempre meglio utilizzare px in html, body ed em per tutto il resto per quanto riguarda il font. Tuttavia, dare un'occhiata a unità relative (vw vh v-min v-max): http://css-tricks.com/viewport-sized-typography/
Usa css3
background-size: auto 100%;
sul contenitore del contenuto. Lo sfondo verrà ridimensionato rispetto all'altezza del contenitore e l'altezza del contenitore aumenterà in relazione alla dimensione del carattere, indipendentemente da come è impostata.
quale immagine? non hai capito la tua domanda..e puoi mescolare 'em' con' px', a tua scelta, ma meglio usare 'em's' –
Usa le immagini per pulsanti, sfondo ecc. –