em ను px గా మార్చడం Em ↔ Pixels ఉచితం ఆన్‌లైన్ సురక్షితం

em ను px గా ఎందుకు మార్చాలి

ఒక స్టైల్‌షీట్ శీర్షికపై margin-bottom: 0.75em అని, బటన్‌పై padding: 0.4em 0.9em అని, టెక్స్ట్ బ్లాక్‌పై line-height 1.3em అని చెబుతుంది. ఇవి మంచి, సరళమైన విలువలు, కానీ వాటిని ఊహించుకోవడం దాదాపు అసాధ్యం. ఆ మార్జిన్ ఎన్ని పిక్సెల్‌లు? బటన్ ప్యాడింగ్ డిజైన్ ఫైల్‌లోని 6 px, 14 px తో సరిపోతుందా? తెలుసుకోవడానికి మీరు em ను px గా మారుస్తారు: em సూచించే ఫాంట్ పరిమాణంతో గుణించి, డిజైన్ సాధనాలు వాడే యూనిట్‌లో సమాధానాన్ని చదువుతారు. డెవలపర్లు కోడ్‌ను సమీక్షించేటప్పుడు, బిల్డ్‌ను మాక్‌అప్‌తో పోల్చి చూసేటప్పుడు, స్పేసింగ్ సమస్యను డీబగ్ చేసేటప్పుడు లేదా పూర్తయిన కాంపోనెంట్‌ను పిక్సెల్‌ల్లో ఆలోచించే వారికి అప్పగించేటప్పుడు అడిగే ప్రశ్న ఇది.

em అనేది CSS లో మార్చడానికి అత్యంత కష్టమైన యూనిట్, ఎందుకంటే దానికి స్థిర విలువ లేదు. em అంటే విలువ వాడిన చోట అమలులో ఉన్న ఫాంట్ పరిమాణం, లేదా font-size ప్రాపర్టీకి అయితే, పేరెంట్ పరిమాణం. కాబట్టి 1.5 em ఒక చోట 24 px, మరో చోట 36 px కావచ్చు, ఒకే స్టైల్‌షీట్‌లో, ఒకే నియమం నుంచి. అందుకే కన్వర్టర్ ఊహించదు. em సూచించే ఫాంట్ పరిమాణాన్ని అడిగి, సమాధానం పక్కన చూపి, దానితో లెక్కిస్తుంది. పరిమాణం మీకు తెలియకపోతే, మీ బ్రౌజర్‌లో దాన్ని ఎలా కనుగొనాలో కింది విభాగాలు వివరిస్తాయి.

లెక్క మీ బ్రౌజర్‌లో జరుగుతుంది, ఏదీ అప్‌లోడ్ కాదు. కింద మీకు సూత్రం, సరైన బేస్‌ను ఎలా కనుగొనాలి, మార్పిడి ఏం ఉంచుతుంది, ఏం ఉంచలేదు, నెస్టెడ్ em విలువలు ఎలా గుణించబడతాయి, డెవలపర్లు em ను px గా ఎప్పుడు మార్చాలి, em ఆధారిత స్టైల్‌షీట్‌ను అర్థమయ్యేలా ఉంచే కొన్ని అలవాట్లు కనిపిస్తాయి.

సూత్రం, బేస్

px అంటే em ను ఫాంట్ పరిమాణంతో గుణించడం

సూత్రం ఒకే గుణకారం: px = em × base. 16 px బేస్‌తో, 1.5 em 24 px అవుతుంది, 0.75 em 12 px అవుతుంది, 2 em 32 px అవుతుంది. పేజీ ఫలితం పక్కన బేస్‌ను ముద్రిస్తుంది, కాబట్టి 1.5 em = 24 px (16 px) వంటి పంక్తి ఏం ఊహించారో ఖచ్చితంగా చెబుతుంది. ఎలిమెంట్ ఫాంట్ పరిమాణం 20 px అయితే, 20 టైప్ చేయండి, అప్పుడు 1.5 em 30 px అవుతుంది.

మీ బ్రౌజర్‌లో బేస్‌ను కనుగొనడం

డెవలపర్ టూల్స్ తెరిచి, ఎలిమెంట్‌ను ఎంచుకుని, దాని కంప్యూటెడ్ ఫాంట్ పరిమాణాన్ని చూడండి. font-size కాకుండా ఏ ఇతర ప్రాపర్టీకైనా బేస్ ఫీల్డ్‌లో టైప్ చేయాల్సిన సంఖ్య అదే. font-size కోసం అయితే, బదులుగా పేరెంట్‌ను ఎంచుకుని దాని కంప్యూటెడ్ పరిమాణాన్ని చదవండి. దీనికి కొన్ని సెకన్లు పడుతుంది, ఊహాగానాలను పూర్తిగా తొలగిస్తుంది.

మీరు పేజీని చూడలేనప్పుడు

పేజీ లేకుండా కోడ్ చదువుతుంటే, ఎలిమెంట్ నుంచి పైకి ఫాంట్ పరిమాణాల గొలుసును అనుసరించండి: దానికి సొంత font-size ఉంటే అదే, లేకపోతే పేరెంట్‌ది, అలా రూట్ వరకు, అది స్టైల్‌షీట్ లేదా పాఠకుడు మార్చకపోతే 16 px. ఒక పరిమాణం em లో ఇవ్వబడిన చోట, గొలుసు వెంట గుణించండి. ఇది విసుగు తెప్పించేది, అందుకే చాలా బృందాలు ఫాంట్ పరిమాణాలకు rem నే ఎంచుకుంటాయి.

మార్పిడి ఏం ఉంచుతుంది, ఏం ఉంచలేదు

ఇది టెక్స్ట్‌తో నిష్పత్తిని ఉంచుతుంది

ఫలితం మీరు టైప్ చేసిన బేస్ వద్ద em సూచించే పిక్సెల్ పరిమాణం. em లో రాసినప్పుడు, ఖాళీ లేదా పరిమాణం అది చెందిన టెక్స్ట్‌ను అనుసరిస్తుంది, ఒక నిర్దిష్ట టెక్స్ట్ పరిమాణానికి అది ఎంత అవుతుందో మార్పిడి చూపుతుంది.

ఇది పేజీ మొత్తానికి ఒకే సమాధానం ఇవ్వలేదు

ఇక్కడ జాగ్రత్త అవసరం: em అనేది రూట్‌కు కాదు, ఎలిమెంట్ సొంత ఫాంట్ పరిమాణానికి, లేదా font-size కి అయితే దాని పేరెంట్ పరిమాణానికి సాపేక్షం. కాబట్టి అదే 1.5 em 16 px ఎలిమెంట్ లోపల 24 px, 24 px ఎలిమెంట్ లోపల 36 px, em లోపల em గుణించబడుతుంది. పేజీలోని సంఖ్య ఫీల్డ్‌లోని బేస్‌కు సరైనది, మరే దానికీ కాదు. ప్రతిచోటా నిలిచే ఒక సంఖ్య మీకు కావాలంటే, rem ఉన్నది అందుకే. రెండింటినీ పోల్చడానికి, rem ను px గా మార్చండి, రూట్-సాపేక్ష యూనిట్ ఎలా స్థిరంగా ఉంటుందో చూడండి.

రౌండింగ్

పూర్ణ సంఖ్య బేస్‌తో గుణిస్తే చాలా విలువలకు ఖచ్చితమైన ఫలితాలు వస్తాయి. బేస్ దశాంశం అయితే, ఉదాహరణకు 13.5 px, 1.2 em వంటి విలువ 16.2 px ఇస్తుంది. బ్రౌజర్లు భిన్న పిక్సెల్‌లను నిర్వహిస్తాయి, కానీ హెయిర్‌లైన్ బార్డర్ లేదా గ్రిడ్‌పై ఐకాన్ కోసం పూర్ణ పిక్సెల్‌లు కావాలంటే, ఉద్దేశపూర్వకంగా రౌండ్ చేసి అది ఎలా కనిపిస్తుందో చూడండి.

నెస్టెడ్ em విలువలు ఎలా గుణించబడతాయి

జాబితా లోపల జాబితా

బాడీ టెక్స్ట్ 16 px ఉన్న పేజీని తీసుకోండి. ఒక జాబితాకు font-size: 0.875em ఉంది, అది 14 px. దాని లోపల ఉన్న అంశాలకు కూడా font-size: 0.875em ఉంది, అది 14 × 0.875 = 12.25 px. అంశం లోపల జాబితా మళ్లీ అదే చేస్తుంది: 10.7 px. మూడు స్థాయిల లోతున టెక్స్ట్ చిన్నదిగా అవుతుంది, అలా కావాలని ఎవరూ నిర్ణయించలేదు. కాంపోనెంట్ కోసం em ను px గా మార్చినప్పుడు సమాధానం మరీ చిన్నదిగా కనిపిస్తే, నెస్టింగ్‌నే మొదట తనిఖీ చేయాలి.

గొలుసు వెంట పైకి వెళ్లడం

నెస్టెడ్ em యొక్క నిజమైన పిక్సెల్ పరిమాణం తెలుసుకోవడానికి, కిందికి వెళ్లే దారిలో ప్రతి విలువతో బేస్‌ను గుణించండి: 16 × 0.875 × 0.875 = 12.25. కన్వర్టర్ ఒకేసారి ఒక అడుగు చేస్తుంది. గొలుసు కోసం, మొదటి విలువను మార్చి, సమాధానాన్ని రెండో దానికి బేస్‌గా వాడి కొనసాగించండి. బ్రౌజర్ చేసే అంకగణితం కూడా అదే.

అది పేరుకుపోకుండా ఎలా ఆపాలి

ఫాంట్ పరిమాణాలకు rem వాడండి, తద్వారా ప్రతి పరిమాణం రూట్‌ను సూచిస్తుంది, స్పేసింగ్‌కు em ఉంచండి, తద్వారా ప్యాడింగ్, మార్జిన్లు తమ సొంత ఎలిమెంట్ టెక్స్ట్‌ను అనుసరిస్తాయి. ఆ కలయికలో ఏదీ పేరుకుపోదు, మీరు మార్చే em విలువలు ఎప్పుడూ మీరు వెంటనే చదవగల ఫాంట్ పరిమాణానికి సాపేక్షంగా ఉంటాయి.

సాధారణ విలువలు

పేజీ అడుగున ఉన్న పట్టిక

మీరు సెట్ చేసిన బేస్ వద్ద సాధారణ em సంఖ్యలకు సరిపోయే పిక్సెల్ విలువల పట్టిక పేజీలో ఉంది: 0.5 em అంటే 8 px, 0.625 అంటే 10, 0.75 అంటే 12, 0.875 అంటే 14, 1 అంటే 16, 1.125 అంటే 18, 1.25 అంటే 20, 1.5 అంటే 24, 2 అంటే 32, 3 అంటే 48, 4 అంటే 64. డిఫాల్ట్ బేస్ వద్ద ఇవి rem కు ఉన్న సంఖ్యలే. బేస్ మార్చండి, పట్టిక దానితో పాటు మారుతుంది, em నిజంగా ఏం చేస్తుందో చూడటానికి ఇది మంచి మార్గం.

రెండు బేస్‌లను పక్కపక్కనే ప్రయత్నించండి

14 బేస్‌తో 1.5 టైప్ చేయండి, తర్వాత 20 బేస్‌తో. మీకు 21, 30 పిక్సెల్‌లు వస్తాయి. em, rem మధ్య మొత్తం తేడా ఒకే ప్రయోగంలో అదే: ఒకే సంఖ్య, రెండు ఎలిమెంట్లు, రెండు పరిమాణాలు.

ఇక్కడ em ను px గా ఎలా మార్చాలి

em విలువను టైప్ చేయండి

మొదటి ఫీల్డ్‌లో em లో పరిమాణాన్ని నమోదు చేయండి. దశాంశాలు అంగీకరించబడతాయి, కాబట్టి 0.714 కూడా 1 లాగే పని చేస్తుంది.

em సూచించే ఫాంట్ పరిమాణాన్ని సెట్ చేయండి

ఎలిమెంట్ ఫాంట్ పరిమాణాన్ని, ప్రాపర్టీ font-size అయితే దాని పేరెంట్ పరిమాణాన్ని టైప్ చేయండి. ఖచ్చితంగా తెలియకపోతే, 16 ను అలాగే ఉంచి ఫలితాన్ని అంచనాగా భావించండి.

పిక్సెల్ విలువను చదవండి

సమాధానం వెంటనే కనిపిస్తుంది, పక్కన బేస్ చూపబడుతుంది. దాన్ని మీ నోట్స్‌లో కాపీ చేయండి లేదా డిజైన్ ఫైల్‌తో పోల్చండి.

ఈ యూనిట్లు ఎక్కడి నుంచి వచ్చాయి

em

em వెబ్ కంటే పాతది. మెటల్ టైప్‌లో అది పోత పోసిన బ్లాక్ వెడల్పు, క్యాపిటల్ M పేరు మీద పెట్టబడింది, టైపోగ్రాఫర్లు ఇప్పటికీ em డ్యాష్‌లు, em స్పేస్‌ల గురించి మాట్లాడతారు. CSS లో దాని అర్థం అమలులో ఉన్న ఫాంట్ పరిమాణం, అందుకే ఎలిమెంట్లను నెస్ట్ చేస్తే అది మారుతుంది.

పిక్సెల్, rem

డిస్‌ప్లేలకు ఊహించదగిన సాంద్రత లేకుండా పోయినప్పుడు, నిజమైన పిక్సెల్‌ల్లో కొలిచిన పేజీ తెరలు పదునెక్కే కొద్దీ కుంచించుకుపోయే పేజీగా మారింది. కాబట్టి CSS పిక్సెల్ ఒక రిఫరెన్స్ పొడవుగా పునర్నిర్వచించబడింది: సౌకర్యవంతమైన చదివే దూరం నుంచి చూసినప్పుడు అంగుళంలో సుమారు 1/96 వంతు. em పేరుకుపోవడం నుంచి తప్పించుకోవడానికి rem జోడించబడింది: అది రూట్ ఎలిమెంట్ em, ఎప్పుడూ గుణించదు. మీరు రెండింటిలోనూ పని చేస్తే, ఇతర దిశకు వెళ్లడానికి px ను em గా మార్చండి.

డెవలపర్లు em ను px గా ఎప్పుడు మారుస్తారు

డిజైన్ ఫైల్‌తో బిల్డ్‌ను తనిఖీ చేయడం

డిజైనర్ పిక్సెల్‌ల్లో ఫైల్‌ను అప్పగిస్తాడు, కోడ్ em లో ఉంటుంది. పేజీ సరిపోతుందో తనిఖీ చేయడానికి, ప్రతి కాంపోనెంట్ ఫాంట్ పరిమాణాన్ని ఉపయోగించి em ను px గా మారుస్తారు. 14 px లేబుల్, 0.714em 1.429em ప్యాడింగ్ ఉన్న బటన్ 10 px, 20 px రావాలి, డిజైన్ 12, 24 అని చెబితే, ఏదో ఒకటి తప్పు.

స్పేసింగ్‌ను డీబగ్ చేయడం

ఖాళీ మరీ పెద్దగా లేదా చిన్నగా కనిపించినప్పుడు, కారణం సాధారణంగా మీరు ఊహించిన దానికంటే పెద్ద లేదా చిన్న ఫాంట్‌ను సూచించే em విలువే. ఎలిమెంట్ కంప్యూటెడ్ ఫాంట్ పరిమాణంతో దాన్ని మార్చడం అంకగణితమే సమస్యా అన్నది వెంటనే చెబుతుంది.

తెలియని కోడ్ చదవడం

వారసత్వంగా వచ్చిన స్టైల్‌షీట్లు, మీరు పిక్సెల్ పరిమాణాలను పునర్నిర్మించాల్సిన em విలువలతో నిండి ఉంటాయి. ప్రధానమైన కొన్నింటిని సరైన బేస్‌లతో మార్చడం డిజైన్ మ్యాప్‌ను ఇస్తుంది.

డాక్యుమెంటేషన్, టెస్టులు రాయడం

పేజీని పరీక్షించే వారు తాము చూసేదాన్ని పిక్సెల్‌ల్లో వర్ణిస్తారు. ప్యాడింగ్ 0.9em అని చెప్పే డెవలపర్ టెస్టర్‌కు పెద్దగా అర్థం కాదు; 12.6 px కు అర్థం ఉంది. మార్చడం రెండు వైపులా ఒకరినొకరు అర్థం చేసుకునేలా చేస్తుంది.

em ను px గా మార్చేటప్పుడు ఉచ్చులు

తప్పు బేస్ వాడటం

అత్యంత సాధారణ పొరపాటు. font-size కోసం, పేరెంట్ పరిమాణాన్ని వాడండి; అన్ని ఇతర ప్రాపర్టీలకు, ఎలిమెంట్ సొంతదాన్ని. బేస్ టైప్ చేసే ముందు ప్రాపర్టీని తనిఖీ చేయండి.

em లో ఉన్న పేరెంట్‌ను మరచిపోవడం

పేరెంట్ పరిమాణం కూడా em లో ఉంటే, మీరు గొలుసును అనుసరించాలి. దాన్ని కుదించడానికి డెవలపర్ టూల్స్ నుంచి కంప్యూటెడ్ విలువను వాడండి.

తెర అదే పిక్సెల్‌లను చూపుతుందని అనుకోవడం

CSS పిక్సెల్ పరికర పిక్సెల్ కాదు. అధిక-సాంద్రత డిస్‌ప్లేలో ఒక CSS పిక్సెల్ రెండు లేదా మూడు పరికర పిక్సెల్‌లు కావచ్చు. మార్పిడి CSS పిక్సెల్‌లను ఇస్తుంది, డిజైన్ సాధనాలు, స్టైల్‌షీట్ పంచుకునే యూనిట్.

సమాధానాన్ని వాగ్దానంగా తీసుకోవడం

పాఠకుడు టెక్స్ట్‌ను పెద్దది చేస్తే లేదా కాంపోనెంట్‌ను వేరే ఫాంట్ పరిమాణంతో మళ్లీ వాడితే, పిక్సెల్‌లు మారతాయి, అవి మారాల్సిందే. మార్చిన సంఖ్య ఒక పరిస్థితిని వర్ణిస్తుంది, అన్నింటినీ కాదు.

మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు

1 em ఎన్ని పిక్సెల్‌లు?

అమలులో ఉన్న ఫాంట్ పరిమాణమంత: డిఫాల్ట్ వద్ద సాధారణ బాడీ టెక్స్ట్‌కు 16 px, 24 px ఎలిమెంట్ లోపల 24 px.

2 em ఎన్ని పిక్సెల్‌లు?

అమలులో ఉన్న ఫాంట్ పరిమాణానికి రెండింతలు. 16 px వద్ద అది 32 px.

నా బ్రౌజర్ వేరేదాన్ని ఎందుకు చూపుతోంది?

ఎలిమెంట్ నిజమైన ఫాంట్ పరిమాణం మీరు టైప్ చేసిన బేస్ కంటే భిన్నంగా ఉంది. డెవలపర్ టూల్స్‌లో కంప్యూటెడ్ ఫాంట్ పరిమాణాన్ని చదవండి.

em, rem ఒకటేనా?

కాదు. em ఎలిమెంట్‌కు సాపేక్షం, rem రూట్‌కు.

నా సంఖ్య అప్‌లోడ్ అవుతుందా?

లేదు. అంకగణితం మీ బ్రౌజర్‌లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.

తిరిగి ఎలా వెళ్లాలి?

px ను em గా మార్చడం తో, అది గుణించడానికి బదులు భాగిస్తుంది.

em స్టైల్‌షీట్‌ను అర్థమయ్యేలా ఉంచే అలవాట్లు

బేస్‌పై కామెంట్ రాయండి

padding: 0.75em 1.25em; /* 12px 20px at 16px */ వంటి పంక్తికి కొన్ని అక్షరాలు ఖర్చవుతాయి, తర్వాతి పాఠకుడికి ఒక మార్పిడి తప్పుతుంది. మీరు ఊహించిన బేస్‌ను అది నమోదు చేస్తుంది.

కాంపోనెంట్‌కు ఒకసారి ఫాంట్ పరిమాణం సెట్ చేయండి

కాంపోనెంట్ ఫాంట్ పరిమాణాన్ని దాని రూట్ ఎలిమెంట్‌పై నిర్వచించి, లోపల em తో దాన్ని సూచించండి. అప్పుడు కాంపోనెంట్‌లోని ప్రతి విలువకు బేస్ ఒకటే, దానికి వ్యతిరేకంగా em ను px గా నమ్మకంగా మార్చవచ్చు.

స్పేసింగ్‌కు em, టైప్‌కు rem

చాలా స్టైల్‌షీట్లు స్థిరపడే విభజన ఇది, ఇది అంకగణితాన్ని సరళంగా ఉంచుతుంది. తెరకు సాపేక్షమైన పరిమాణాల కోసం, px ను vw గా మార్చడం, vw ను px గా మార్చడం సాధనాలు.

వేరే టెక్స్ట్ పరిమాణంలో పరీక్షించండి

మీ బ్రౌజర్‌లో డిఫాల్ట్ టెక్స్ట్ పరిమాణాన్ని పెంచి పేజీని చూడండి. స్పేసింగ్ టెక్స్ట్‌ను అనుసరిస్తే, em విలువలు పని చేస్తున్నాయి. లేకపోతే, ఏదో పిక్సెల్‌ల్లోనే మిగిలిపోయింది.

చిక్కు సందర్భాలకు ఒక పద్ధతి

బయటి నుంచి లోపలికి పని చేయండి

కాంపోనెంట్ ఇతరుల లోపల లోతుగా ఉండి దాని em విలువలు గందరగోళంగా కనిపించినప్పుడు, మీకు పరిమాణం తెలిసిన బయటి ఎలిమెంట్‌తో మొదలుపెట్టి, ఒక్కో స్థాయిని మార్చుకుంటూ లోపలికి వెళ్లండి. వెళ్తూ ప్రతి పిక్సెల్ పరిమాణాన్ని ఒక నోట్‌లో రాయండి. రెండు లేదా మూడు స్థాయుల తర్వాత మొత్తం గొలుసు కాగితంపై ఉంటుంది, ఆశ్చర్యకరమైన సంఖ్య ఎక్కడి నుంచి వస్తుందో ఖచ్చితంగా చూడగలరు. దీనికి ఒక నిమిషం పడుతుంది, ఒక గంట ఊహాగానాలను భర్తీ చేస్తుంది.

సరళీకరించాలా వద్దా నిర్ణయించండి

లేఅవుట్ అర్థం చేసుకోవడానికి నాలుగు స్థాయుల్లో em ను px గా మార్చాల్సి వస్తే, స్టైల్‌షీట్ మీకు ఏదో చెబుతోంది. ఫాంట్ పరిమాణాలను rem కు మార్చడాన్ని పరిగణించండి, తద్వారా ప్రతిదీ రూట్‌ను సూచిస్తుంది, స్పేసింగ్ మాత్రమే em లో ఉంచండి. పేజీ అదే విధంగా కనిపిస్తుంది, వచ్చే ఏడాది చదవడం చాలా సులువు అవుతుంది.

సంబంధిత కన్వర్టర్లు

అదే సాధనాల కుటుంబం పక్కనే ఉన్న మార్పిడులను కవర్ చేస్తుంది. em కు తిరిగి వెళ్లడానికి, px ను em గా మార్చడం వాడండి. రూట్‌కు సాపేక్షమైన పరిమాణాల కోసం, px ను rem గా మార్చడం, rem ను px గా మార్చడం ఉన్నాయి, తెరకు సాపేక్షమైన పరిమాణాల కోసం, px ను vw గా మార్చడం, vw ను px గా మార్చడం. అదే స్టైల్‌షీట్‌లోని రంగుల కోసం, HEX ను RGB గా మార్చడం, RGB ను HEX గా మార్చడం సంజ్ఞామానాలను నిర్వహిస్తాయి.

ఒక పనిచేసిన ఉదాహరణ

మీరు ఒక బటన్ కాంపోనెంట్‌ను సమీక్షిస్తున్నారనుకోండి. లేబుల్ 14 px, CSS padding: 0.714em 1.429em అని, ఐకాన్, లేబుల్ మధ్య 0.5em ఖాళీ అని చెబుతుంది. మీరు బేస్‌గా 14 టైప్ చేసి, తర్వాత 0.714 టైప్ చేసి 10 px చదువుతారు, 1.429 టైప్ చేసి 20 px చదువుతారు, 0.5 టైప్ చేసి 7 px చదువుతారు. డిజైన్ ఫైల్ 10, 20, 8 అని చెబుతుంది. మూడింటిలో రెండు సరిపోతాయి, కాబట్టి ఖాళీని చూస్తారు: 14 బేస్ వద్ద 8 px అంటే 0.571 em, ఎవరో దాన్ని 0.5 కు రౌండ్ చేశారు. మీరు సమీక్షలో దాన్ని లేవనెత్తుతారు, పరిష్కారం ఒకే సంఖ్య.

ఒక చిన్న చెక్‌లిస్ట్

మార్చే ముందు

em సూచించే ఫాంట్ పరిమాణాన్ని డెవలపర్ టూల్స్ నుంచి లేదా కోడ్‌లోని ఫాంట్ పరిమాణాల గొలుసు నుంచి కనుగొనండి.

మార్చేటప్పుడు

em విలువను టైప్ చేసి, బేస్ సెట్ చేసి, పిక్సెల్‌లను చదవండి, ఫలితం పక్కన చూపిన బేస్‌ను గమనించండి.

మార్చిన తర్వాత

డిజైన్ ఫైల్‌తో పోల్చండి. సంఖ్యలు భిన్నంగా ఉంటే, కోడ్‌ను అనుమానించే ముందు బేస్‌ను తనిఖీ చేయండి.

సాధారణ పొరపాట్లు

తనిఖీ చేయకుండా 16 వాడటం

ఎలిమెంట్ ఫాంట్ పరిమాణం 16 px అయినప్పుడు మాత్రమే అది సరైనది.

em ను rem తో కలపడం

అవి ఒకేలా కనిపిస్తాయి, వేరుగా ప్రవర్తిస్తాయి. ప్రతిదానికీ సరైన పేజీని వాడండి.

em పేరుకుపోతుందని మరచిపోవడం

నెస్టెడ్ ఎలిమెంట్ లోపల విలువ మీరు చూడని పరిమాణానికి సాపేక్షం. గొలుసును అనుసరించండి.

మీ సంఖ్యలు మీ పరికరంలోనే ఉంటాయి

లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ సొంత బ్రౌజర్ వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించడానికి ఏదీ ఉండదు, సృష్టించడానికి ఖాతా ఉండదు. em ను px గా మార్చడానికి అది సులువైన మార్గం.

సారాంశం

ఇక్కడ em ను px గా మార్చడానికి, em లో పరిమాణాన్ని, అది సూచించే ఫాంట్ పరిమాణాన్ని టైప్ చేసి, px = em × base సూత్రంతో ఫలితాన్ని పిక్సెల్‌ల్లో వెంటనే చదవండి. మార్పిడి విలువ వాడిన చోట అమలులో ఉన్న ఫాంట్ పరిమాణానికి సాపేక్షమైన నిష్పత్తిని ఉంచుతుంది. అది పేజీకి ఒకే సమాధానాన్ని ఇవ్వలేదు: em అనేది ఎలిమెంట్‌కే, లేదా font-size కి పేరెంట్‌కు సాపేక్షం, కాబట్టి అదే 1.5 em 16 px ఎలిమెంట్ లోపల 24 px, 24 px ఎలిమెంట్ లోపల 36 px, em లోపల em గుణించబడుతుంది. ప్రతిచోటా నిలిచే ఒక సంఖ్య కోసం, rem వాడండి. ఏదీ అప్‌లోడ్ కాదు.