Pixeli în em
Convertiți px în em folosind dimensiunea fontului unui element părinte. em este relativ la părintele imediat - util atunci când umplutura unui buton ar trebui să se scaleze cu textul etichetei sau o liniuță a listei imbricate urmează dimensiunea corpului local. Formula: em = px ÷ parentFontSizePx.
Pixeli
Mărimea fontului părinte (px)
Rezultat
1em
Cum se transformă px în em
1. Identificați dimensiunea fontului elementului părinte în px (de exemplu, 18 px).
2. Introdu valoarea px de convertit (de exemplu, 9 px spațiere între litere).
3. Citiți rezultatul (9 ÷ 18 = 0,5 em).
4. Aplicați în CSS pe elementul fiu încadrat în acel context părinte.
Px to em exemple
Captuseala nasturii
Font părinte 16 px; umplutură verticală 8 px → 0,5 em. Scalează dacă părintele devine 18 px pe ecrane mari.
Titlu imbricat
Font secțiune 20 px; subtitlu 24 px design → 1,2 em relativ la secțiune, nu rădăcină.
Alinierea pictogramei
Pictogramă în linie 14 px cu linie de text de 16 px → caseta de pictogramă 0,875 em se aliniază la valorile text.
Când să convertiți px în em
• Când elementele interne ale componentelor ar trebui să se scaleze cu modificările locale ale dimensiunii fontului.
• Când stilați text îmbogățit în care titlurile se află în containere de dimensiuni diferite.
• Când CSS vechi le folosea și mapați noi modele px în același sistem.
Când să alegi altceva
• Când vrei o spațiere consistentă la nivelul întregului site - rem de la rădăcină este mai simplu.
• Când cuibărirea adâncă provoacă insecte care se combină - preferați rem pentru margini.
• Când ai nevoie de dimensionare relativă a ferestrei de vizualizare - folosești vw/vh.
Evitarea capcanelor de agravare
Meniurile imbricate profund cu dimensiunea fontului: 0,9 em la fiecare nivel micșorează textul în mod neașteptat. Prefer rem pentru dimensiunea fontului la niveluri structurale; folosești em pentru umplutura locală legată de un părinte. Documentează ipotezele părintelui în jetoane de proiectare.
e pentru interogări media?
Interogarea media în unități la care se face referire istoric în browser implicit (16 px), nu componenta părinte. Designul receptiv modern folosește adesea puncte de întrerupere rem sau px - știți ce context vizează foaia de stil.
Întrebări frecvente
Care este diferența dintre em și rem?
em face referire la dimensiunea fontului părinte; rem face referire numai la dimensiunea fontului rădăcină (html).
De ce se compune im imbricat?
Fiecare nivel se înmulțește: 1,2 em în interiorul 1,2 em părinte = 1,44 × rădăcină dacă ambele se aplică lanțurilor de dimensiuni de font.
Formula?
em = px ÷ parentFontSizePx. Folosește întotdeauna dimensiunea fontului calculată de părintele direct.
Umplutură în ele?
Da — padding/margin la scara em cu dimensiunea fontului propriu a elementului (pentru margine/margine, spec folosește dimensiunea fontului elementului).
Când au apărut ele?
În mod tradițional „lățimea M majusculei” în tip metal; acum definit în raport cu dimensiunea fontului în CSS.
Se încarcă datele?
Nu. Conversia funcționează local.