px ను em గా మార్చడం Pixels ↔ Em ఉచితం ఆన్లైన్ సురక్షితం
px లో ఒక విలువ రాయండి, అక్కడే దాన్ని em గా చదువుకోండి. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది, ఎక్కడికీ ఏదీ పంపబడదు, జవాబు దేనిమీద ఆధారపడుతుందో ఊహించకుండా కింద రాసి ఉంది.
ఏదీ అప్లోడ్ కాదు
సాధారణ పరిమాణాలు — px ను em గా మార్చడం
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
ఈ ప్రమాణాలు ఎక్కడి నుండి వచ్చాయి
CSSలోని పిక్సెల్ మీ తెరలోని పిక్సెల్ కాదు. తెరల సాంద్రతను ముందే ఊహించలేని స్థితి వచ్చాక, నిజమైన పిక్సెళ్ళతో కొలిచిన పేజీ — తెరలు పదునెక్కే కొద్దీ కుంచించుకుపోయే పేజీ అయిపోయింది; కాబట్టి CSS పిక్సెల్ను ఒక సూచన పొడవుగా మళ్ళీ నిర్వచించారు: హాయిగా చదివే దూరం నుండి చూస్తే, ఒక అంగుళంలో దాదాపు తొంభై ఆరో వంతు. ఈ పేజీలోని మిగతాదంతా దాని మీదే నిలిచి ఉంది. em వెబ్ కన్నా పాతది — సీస అక్షరాల్లో అది పోతపోసిన దిమ్మె వెడల్పు, పెద్ద M అక్షరం నుండి పేరు వచ్చింది — CSSలో అది అమల్లో ఉన్న ఫాంటు పరిమాణాన్ని సూచిస్తుంది; అందుకే మూలకాలను ఒకదానిలో ఒకటి పెట్టినప్పుడు అది మారుతుంది. సరిగ్గా దాని నుండి తప్పించుకోవడానికే rem చేర్చారు: అది మూల మూలకపు em, ఎన్నడూ పోగుపడదు. vw స్పందించే డిజైనుతో వచ్చింది: దృశ్య ప్రాంతం వెడల్పులో వందో వంతు, ఆ వెడల్పు ఎంతైనా సరే.
ఇవి మీకు ఎక్కడ ఎదురవుతాయి
ఇవి ప్రతి స్టైల్షీటు ప్రమాణాలు. పిక్సెళ్ళు అంచులను, నీడలను, పెరగకూడని ప్రతిదాన్నీ కొలుస్తాయి; rem అక్షరాలను, ఖాళీలను, అమరికను కొలుస్తుంది — మూలం వద్ద ఒక్క మార్పుతో మొత్తం ఇంటర్ఫేసు పరిమాణం మారిపోతుంది; em తన సొంత పాఠాన్ని అనుసరించవలసిన వాటిని కొలుస్తుంది, ఉదాహరణకు ఒక బొత్తాము లోపలి ఖాళీ; vw ఏ పరికరంలోనైనా తెరను నింపవలసిన శీర్షికలను, ఆరంభ భాగాలను కొలుస్తుంది. వీటి మధ్య మార్పిడే, పిక్సెళ్ళలో అందించిన డిజైనును సాగే స్టైల్షీటుగా మార్చే రోజువారీ లెక్క.
తరచుగా అడిగే ప్రశ్నలు
16 px ఎందుకు మామూలు ఆరంభ బిందువు?
ఎందుకంటే ప్రధాన బ్రౌజర్లన్నిటిలో పాఠానికి అప్రమేయ పరిమాణం అదే; దాన్ని మార్చని స్టైల్షీటు దాన్నే వారసత్వంగా పొందుతుంది. కాబట్టి అప్రమేయ అమరికలో ఒక rem అంటే 16 px; సుపరిచితమైన మార్పిడులు అక్కడి నుండే వస్తాయి: 0.5 rem అంటే 8 px, 1.5 rem అంటే 24 px. వాడేవారు బ్రౌజర్ అమరికల్లో అప్రమేయ పరిమాణాన్ని పెంచుకుని ఉంటే, అవే rem విలువలూ దానితో పాటు పెరుగుతాయి — వాటిని వాడటంలోని ఉద్దేశం సరిగ్గా అదే.
rem వాడాలా, em వాడాలా?
పేజీ మొత్తాన్ని అనుసరించవలసిన ప్రతిదానికీ rem — అక్షర పరిమాణాల మెట్లు, ఖాళీలు, అమరిక వెడల్పులు — ఎందుకంటే అది మూలం నుండి కొలవబడుతుంది, ఎన్నడూ పోగుపడదు. తాను ఉన్న పాఠాన్ని అనుసరించవలసిన ప్రతిదానికీ em: ఒక బొత్తాము లోపలి ఖాళీ, ఒక చిహ్నం పక్కనున్న సందు, ఒక ఉల్లేఖనం లోపలికి జరగడం. మామూలు పొరపాటు ఏమిటంటే emలో కొలిచిన మూలకాలను ఒకదానిలో ఒకటి పెట్టడం: 1.2 em లోపలి 1.2 em అన్నది 1.44 అవుతుంది, తరువాత 1.73 — చివరకు పేజీ కింది పాఠం అనుకున్నదానికి రెట్టింపు అవుతుంది.
సమాధానం ఖచ్చితమేనా?
రెండు ప్రమాణాలూ పూర్ణ సంఖ్యలతో ఒకదానినొకటి నిర్వచించే చోట అవును — పేజీ దాన్ని సంఖ్య పైనే చెబుతుంది, గుండ్రీకరణ అనేది ఎన్ని అంకెలు చూపాలి అన్నదానిలోనే ఉంటుంది. నిష్పత్తికి పరిమిత దశాంశం లేని చోట, పేజీ పన్నెండు సార్థక అంకెలు చూపి సంబంధం సుమారైనదని చెబుతుంది — వేరేలా నటించదు.
నేను టైప్ చేసేది నా పరికరం నుండి బయటకు వెళ్తుందా?
లేదు. లెక్క మీ బ్రౌజర్లోనే జరుగుతుంది; ఏదీ అప్లోడ్ కాదు, అప్లోడ్ చేయడానికి సర్వరే లేదు. పేజీని ఒకసారి తెరిస్తే, నెట్వర్క్ ఆపేసినా పనిచేస్తుంది.
px ను em గా ఎందుకు మార్చాలి
Em అనేది CSS లో అత్యంత పాత సాపేక్ష యూనిట్, అత్యధిక వాదనలకు కారణమయ్యేది కూడా. డిజైన్ ఫైల్ నుంచి మీకు పిక్సెల్లలో ఒక సైజు ఉంటుంది: బటన్పై 20 px ప్యాడింగ్, ఐకాన్ పక్కన 14 px ఖాళీ, హెడ్డింగ్కు 36 px, మీరు దాన్ని em లో కోరుకుంటారు, తద్వారా అది తాను చెందిన వచనాన్ని అనుసరిస్తుంది. మీరు px ను em గా మార్చినప్పుడు, ఒక నిర్దిష్ట ప్రశ్న అడుగుతున్నారు: ఇది ప్రస్తుత ఫాంట్ పరిమాణంలో ఎన్ని రెట్లు? సమాధానం పేజీ ఊహించలేని ఒక సంఖ్యపై ఆధారపడుతుంది, అంటే విలువ వాడే చోట అమలులో ఉన్న ఫాంట్ పరిమాణం, కాబట్టి కన్వర్టర్ ఆ సంఖ్యను ఒక ఫీల్డ్లో ఉంచి బహిరంగంగా వాడుతుంది.
సైజులను em లో రాయడానికి కారణం, వచనానికి చెందిన విషయాలు వచనంతో పాటు పెరగాలి. బటన్ లేబుల్ పెద్దదైతే బటన్ లోపలి ప్యాడింగ్ కూడా పెద్దదిగా ఉండాలి. క్యాప్షన్ వెడల్పైతే ఐకాన్, క్యాప్షన్ మధ్య ఖాళీ కూడా వెడల్పు కావాలి. హెడ్డింగ్ కింది మార్జిన్ హెడ్డింగ్కు అనుపాతంలో ఉండాలి. ఈ అన్ని సందర్భాలలో ఫాంట్ పరిమాణం మారగానే పిక్సెల్ విలువ తప్పు అవుతుంది, em విలువ ఏ పరిమాణంలోనైనా సరైనదే. em కోసం మొత్తం వాదన అదే, అది బలమైనది.
లెక్క మీ బ్రౌజర్లో జరుగుతుంది, ఏదీ అప్లోడ్ కాదు. కింద మీకు ఫార్ములా, rem కంటే em కు ఎక్కువ జాగ్రత్త ఎందుకు అవసరమో కారణం, ఊహించని సైజులను పుట్టించే నెస్టింగ్ ఉచ్చు, em సరైన యూనిట్ అయిన చోట్లు, నిజమైన స్టైల్షీట్లో em, rem మధ్య ఎంచుకునే పద్ధతి కనిపిస్తాయి.
ఫార్ములా, బేస్
em = px ను ఫాంట్ పరిమాణంతో భాగించినది
ఫార్ములా ఒక భాగహారం: em = px ÷ base. బేస్ 16 px అయితే, 24 px విలువ 1.5 em అవుతుంది, 8 px విలువ 0.5 em అవుతుంది, 20 px విలువ 1.25 em అవుతుంది. పేజీ ఫలితం పక్కన బేస్ను చూపుతుంది, 24 px = 1.5 em (16 px) లాగా, తద్వారా ఏది ఊహించబడిందో మీరు చూడవచ్చు. లెక్క rem కు ఉన్నదే. అర్థం వేరు.
బేస్ అంటే ఏమిటి
rem కు బేస్ అంటే రూట్ ఎలిమెంట్ ఫాంట్ పరిమాణం. em కు, విలువ వాడిన ఎలిమెంట్ ఫాంట్ పరిమాణం, లేదా font-size ప్రాపర్టీకే అయితే, పేరెంట్ ఫాంట్ పరిమాణం. అందుకే em కు ఒకే సమాధానం లేదు: ఒకే స్టైల్షీట్ విలువ వేర్వేరు చోట్ల వేర్వేరు పిక్సెల్ సైజులను సూచిస్తుంది. వచనం 14 px ఉన్న బటన్కు ప్యాడింగ్ మారుస్తుంటే, బేస్గా 14 టైప్ చేయండి. 32 px హెడ్డింగ్కు మార్జిన్ మారుస్తుంటే, 32 టైప్ చేయండి.
మీకు తెలియనప్పుడు డిఫాల్ట్
మీకు కేవలం సుమారు సంఖ్య కావాలంటే, బేస్ను 16 వద్ద ఉంచండి, ఎవరూ మార్చని బ్రౌజర్లో సాధారణ వచనం పరిమాణం. సాధారణ బాడీ వచనం బ్లాక్కు ఫలితం సరైనదే, ఎలిమెంట్ వేరే పరిమాణంలో ఉన్నా అనుపాతం గురించి ఒక అవగాహన ఇస్తుంది.
మార్పిడి ఏమి ఉంచుతుంది, ఏమి ఉంచలేదు
వచనానికి అనుపాతాన్ని ఉంచుతుంది
ఫలితం అంటే విలువ వాడే చోట అమలులో ఉన్న ఫాంట్ పరిమాణానికి సంబంధించిన అనుపాతం. em లో రాస్తే, ఖాళీ పక్కనున్న వచనంతో పెరుగుతుంది, తగ్గుతుంది, పదాల చుట్టూ ఖాళీ ఎలా ప్రవర్తించాలో సరిగ్గా అదే.
పేజీ మొత్తానికి ఒకే సంఖ్యను ఇవ్వలేదు
ఇదే జాగ్రత్తగా ఉండాల్సినది. em రూట్కు కాదు, ఎలిమెంట్ ఫాంట్ పరిమాణానికి, లేదా font-size కు అయితే దాని పేరెంట్కు సాపేక్షం. కాబట్టి పేజీకి ఒకే సమాధానం లేదు: అదే 1.5 em 16 px ఎలిమెంట్లో 24 px, 24 px ఎలిమెంట్లో 36 px అవుతుంది, em లోపల em గుణిస్తుంది. పేజీలోని సంఖ్య ఫీల్డ్లోని బేస్కు మాత్రమే సరైనది, మరి దేనికీ కాదు. ప్రతిచోటా నిలిచే ఒకే సంఖ్య కావాలంటే, దానికోసమే rem ఉంది. పోల్చడానికి, px ను rem గా మార్చండి, అదే పిక్సెల్ విలువ ఎలా ప్రవర్తిస్తుందో చూడండి.
రౌండింగ్
16 తో భాగించడం చాలా సైజులకు స్పష్టమైన విలువలను, మరికొన్నిటికి పునరావృత దశాంశాలను ఇస్తుంది. 0.8125 em వంటి విలువ స్టైల్షీట్లో సరే, కానీ ఖచ్చితమైన సైజు ముఖ్యం కాకపోతే 0.8 లేదా 0.85 కు గుండ్రం చేయడం మీకు ఇష్టం కావచ్చు. ఖచ్చితత్వం ముఖ్యమైన చోట పూర్తి సంఖ్యను ఉంచండి.
నెస్టింగ్ ఉచ్చు
em ఎలా కూడుకుంటుంది
ఒక జాబితాకు font-size: 0.875em ఉందనుకోండి, దాని ఐటెమ్లకూ font-size: 0.875em ఉంది. జాబితా తన పేరెంట్లో 87.5%. ప్రతి ఐటెమ్ జాబితాలో 87.5%, అంటే పేరెంట్లో సుమారు 76.6%. ఐటెమ్ లోపల నెస్ట్ అయిన జాబితా మళ్లీ సుమారు 67% కు కుంచించుకుంటుంది. మూడు స్థాయిల తర్వాత వచనం చాలా చిన్నదవుతుంది, అది ఎవరూ కావాలని రాయలేదు. em కూడుకుంటుంది అనడంలో ఉద్దేశం ఇదే.
px ను em గా మార్చేటప్పుడు ఇది ఎందుకు ముఖ్యం
font-size కోసం పిక్సెల్ విలువను em కు మారిస్తే, మీరు వాడాల్సిన బేస్ ఎలిమెంట్ సొంత పరిమాణం కాదు, పేరెంట్ ఫాంట్ పరిమాణం. చాలా పొరపాట్లు తప్పు బేస్ వాడటం వల్లే వస్తాయి. ప్యాడింగ్, మార్జిన్ వంటి ఇతర ప్రాపర్టీలకు, బేస్ ఎలిమెంట్ సొంత ఫాంట్ పరిమాణం. నియమం చెప్పడం సులభం, మరచిపోవడమూ సులభం: font-size పైకి చూస్తుంది, మిగతావన్నీ తమను తాము చూస్తాయి.
ఆశ్చర్యాలను ఎలా నివారించాలి
వచనాన్ని అనుసరించే ఖాళీకి em, ఫాంట్ పరిమాణాలకు rem వాడండి. అలా ఫాంట్ పరిమాణాలు ఎప్పుడూ కూడుకోవు, ఎందుకంటే అవి రూట్ను సూచిస్తాయి, ఖాళీ ఇప్పటికీ తన వచనాన్ని అనుసరిస్తుంది. చాలా ఆధునిక స్టైల్షీట్లు స్థిరపడే కలయిక అదే.
సాధారణ సైజులు
పేజీ అడుగున ఉన్న పట్టిక
కన్వర్టర్ కింద మీరు సెట్ చేసిన బేస్ వద్ద సాధారణ సైజుల పట్టిక ఉంటుంది: 8 px అంటే 0.5 em, 10 px అంటే 0.625, 12 px అంటే 0.75, 14 px అంటే 0.875, 16 px అంటే 1, 18 px అంటే 1.125, 20 px అంటే 1.25, 24 px అంటే 1.5, 32 px అంటే 2, 48 px అంటే 3, 64 px అంటే 4. బేస్ 16 వద్ద ఇవి rem కు ఉన్న సంఖ్యలే, అందుకే ప్రజలు రెంటినీ కలిపేస్తారు. తేడా 16 దేనిని సూచిస్తుందన్నదానిలో ఉంది.
ఎలిమెంట్కు సరిపోయేలా బేస్ మార్చడం
చిన్న బటన్ కోసం బేస్ను 14 కు సెట్ చేస్తే, పట్టిక మారుతుంది: 14 px ఇప్పుడు 1 em, 7 px 0.5 em, 21 px 1.5 em. ప్రయత్నించండి, 1.5 em ప్యాడింగ్ 14 px బటన్లో, 18 px బటన్లో వేర్వేరు పిక్సెల్ పరిమాణం ఎలా కలిగి ఉంటుందో, అది ఎందుకు ఉపయోగకరమో మీకు కనిపిస్తుంది.
ఇక్కడ px ను em గా ఎలా మార్చాలి
పిక్సెల్ విలువను టైప్ చేయండి
మొదటి ఫీల్డ్లో పిక్సెల్లలో సైజును నమోదు చేయండి. దశాంశాలు అంగీకరించబడతాయి.
em సూచించే ఫాంట్ పరిమాణాన్ని సెట్ చేయండి
ఎలిమెంట్ ఫాంట్ పరిమాణాన్ని టైప్ చేయండి, లేదా font-size ను మారుస్తుంటే దాని పేరెంట్ది. మీకు ఖచ్చితంగా తెలియకపోతే, 16 ఉంచి ఫలితాన్ని అంచనాగా పరిగణించండి.
em విలువను కాపీ చేయండి
సంఖ్యను యూనిట్తో మీ CSS లో వాడండి, padding: 1.25em లాగా. యూనిట్ లేని సంఖ్య చాలా ప్రాపర్టీలకు చెల్లదు.
ఈ యూనిట్లు ఎక్కడ నుంచి వచ్చాయి
లోహ టైప్లో em
em వెబ్ కంటే పాతది. లోహ టైప్లో అది పోతపోసిన బ్లాక్ వెడల్పు, పెద్ద అక్షరం M పేరిట పెట్టబడింది, ముద్రిత పంక్తిలో అడ్డంగా ఖాళీకి సహజ యూనిట్. టైపోగ్రాఫర్లు ఇప్పటికీ em డాష్లు, em స్పేస్ల గురించి మాట్లాడతారు. CSS లో ఆ ఆలోచన కొంచెం సడలిన రూపంలో మిగిలింది: ఒక em అంటే ప్రస్తుత ఫాంట్ పరిమాణం.
పిక్సెల్, rem
CSS పిక్సెల్ అనేది సౌకర్యవంతమైన చదివే దూరం వద్ద చూసే అంగుళంలో సుమారు 1/96 ఉండే రిఫరెన్స్ పొడవు, మీ స్క్రీన్పై చుక్క కాదు. rem ను డెవలపర్లకు సాపేక్షమైనదీ కానీ ఎప్పుడూ కూడుకోనిదీ అయిన యూనిట్ ఇవ్వడానికి చేర్చారు: అది రూట్ ఎలిమెంట్ em. పిక్సెల్, em, rem కలిసి మూడు అవసరాలను తీరుస్తాయి: స్థిర సైజు, వచనానికి సాపేక్ష సైజు, పేజీకి సాపేక్ష సైజు.
em సరైన ఎంపిక అయిన చోట్లు
బటన్లు, ఫారమ్ ఫీల్డ్ల లోపల ప్యాడింగ్
padding: 0.5em 1em ఉన్న బటన్ ఏ వచనం పరిమాణంలోనైనా అనుపాతంలో ఒకేలా కనిపిస్తుంది. లేబుల్ను పెద్దది చేస్తే బటన్ మొత్తం దానితో పెరుగుతుంది, టూల్బార్లో, హీరో బ్యానర్లో వాడగలిగే భాగం నుంచి మీరు కోరేది ఇదే.
ఐకాన్ల పక్కన ఖాళీ
ఐకాన్ తర్వాత క్యాప్షన్ ఉంటే క్యాప్షన్తో స్కేల్ అయ్యే ఖాళీ కావాలి. 0.4em మార్జిన్ అది చేస్తుంది; 6px మార్జిన్ చేయదు.
హెడ్డింగ్లు, పేరాల చుట్టూ మార్జిన్లు
పేరా ఖాళీ em లో ఉంటే పత్రంలో నిలువు లయను కాపాడటం సులభం, ఎందుకంటే అది పేరా పరిమాణాన్ని అనుసరిస్తుంది. వేర్వేరు బ్రేక్పాయింట్లలో హెడ్డింగ్ సైజు మారినప్పుడు, em లో హెడ్డింగ్ మార్జిన్ అనుపాతంలో ఉంటుంది.
మీడియా క్వెరీలు
em లో రాసిన బ్రేక్పాయింట్లు పాఠకుడి వచనం పరిమాణానికి స్పందిస్తాయి, కాబట్టి వచనం పెద్దది చేసిన వారికి లేఅవుట్ ముందే ఇరుకైన రూపానికి మారుతుంది. మీడియా క్వెరీలలో em బ్రౌజర్ డిఫాల్ట్ను సూచిస్తుంది, ఏ ఎలిమెంట్నూ కాదు, కాబట్టి అది కూడుకోదు.
px ను em గా మార్చేటప్పుడు ఉచ్చులు
తప్పు బేస్ వాడటం
అత్యంత సాధారణ పొరపాటు. font-size కు పేరెంట్ పరిమాణం, మిగతా వాటికి ఎలిమెంట్ సొంత పరిమాణం వాడండి. బేస్ టైప్ చేసే ముందు మీరు ఏ ప్రాపర్టీని మారుస్తున్నారో చూడండి.
పేరెంట్ కూడా em లో ఉండవచ్చని మరచిపోవడం
పేరెంట్ ఫాంట్ పరిమాణమే em లో ఉంటే, నిజమైన సైజు తెలుసుకోవడానికి మీరు గొలుసును పైకి అనుసరించాలి. స్టైల్షీట్ సంక్లిష్టమైనప్పుడు, ఫాంట్ పరిమాణాలను rem కు మార్చి, ఖాళీ కోసం em ఉంచండి.
మొత్తం భాగానికి ఒకే సంఖ్య ఆశించడం
వేర్వేరు పరిమాణాల వచనం ఉన్న భాగానికి దాని భాగాలకు ఒకే em విలువ ఉండదు. ప్రతి భాగాన్ని దాని సొంత బేస్కు వ్యతిరేకంగా మార్చండి.
ఒకే ప్రాపర్టీకి em, rem కలపడం
1em మార్జిన్ పక్కన 1rem ప్యాడింగ్ చెల్లుతుంది కానీ తరచూ గందరగోళంగా ఉంటుంది. ఫాంట్ పరిమాణాలకు rem, ఖాళీకి em వంటి నియమాన్ని ఎంచుకుని దానికి కట్టుబడి ఉండండి.
మార్చే ముందు ప్రజలు అడిగే ప్రశ్నలు
16 px అంటే ఎన్ని em?
అమలులో ఉన్న ఫాంట్ పరిమాణం 16 px అయితే ఒకటి. ఎలిమెంట్ ఫాంట్ పరిమాణం 20 px అయితే, 16 px అంటే 0.8 em.
em, rem కంటే మంచిదా?
ఏదీ మంచిది కాదు. ఫాంట్ పరిమాణాలకు, గ్లోబల్ లేఅవుట్కు rem మంచిది. తన సొంత వచనాన్ని అనుసరించాల్సిన ఖాళీకి em మంచిది.
నా ప్యాడింగ్ ఊహించిన దానికంటే పెద్దదిగా ఎందుకు ఉంది?
ఎందుకంటే అది ఎలిమెంట్ ఫాంట్ పరిమాణానికి సాపేక్షం, అది మీరు అనుకున్న దానికంటే పెద్దదిగా ఉండవచ్చు. బ్రౌజర్ డెవలపర్ టూల్స్లో లెక్కించిన ఫాంట్ పరిమాణాన్ని తనిఖీ చేయండి.
నేను దశాంశాలు వాడవచ్చా?
అవును. 0.625em, 1.333em వంటి విలువలు సాధారణమే.
నా సంఖ్య అప్లోడ్ అవుతుందా?
లేదు. లెక్క మీ బ్రౌజర్లో నడుస్తుంది, ఏదీ ఎక్కడికీ పంపబడదు.
తిరిగి ఎలా వెళ్లాలి?
em ను px గా వాడండి, అది భాగించడానికి బదులు గుణిస్తుంది.
px ను em గా మార్చేటప్పుడు తెలివిగా ఎంచుకోవడం
విలువ దేనికి చెందినదో నిర్ణయించండి
అది వచనానికి చెందితే, em సరైనది. అది పేజీకి చెందితే, కాలమ్ వెడల్పు లేదా సెక్షన్ ఖాళీ వంటిది, rem లేదా వ్యూపోర్ట్ యూనిట్ మెరుగ్గా సరిపోతుంది. px ను vw గా సైజును స్క్రీన్ వెడల్పు వాటాగా వ్యక్తపరుస్తుంది.
ఉద్దేశాన్ని కామెంట్లో రాయండి
padding: 0.75em 1.25em; /* 12px 20px at 16px */ వంటి పంక్తి తర్కాన్ని కనిపించేలా చేస్తుంది. తర్వాత ఫాంట్ పరిమాణం మారినప్పుడు, సంఖ్యలు దేనికోసం ఉద్దేశించబడ్డాయో మీకు తెలుస్తుంది.
భాగం ఫాంట్ పరిమాణాన్ని ఒకే చోట ఉంచండి
ఫాంట్ పరిమాణాన్ని భాగం రూట్ ఎలిమెంట్పై సెట్ చేసి, లోపల ఉన్నవన్నీ దాన్ని సూచించనివ్వండి. అప్పుడు లోపల ఉన్న em విలువలు భాగంలో ప్రతిచోటా ఒకే అర్థం ఇస్తాయి, మీరు ఒకే బేస్కు వ్యతిరేకంగా px ను em గా మార్చవచ్చు.
px ను em గా మార్చేటప్పుడు మంచి అలవాట్లు
px ను em గా ఒక్కో భాగానికి మార్చండి
మొత్తం స్టైల్షీట్కు ఒకేసారి px ను em గా మార్చడానికి ప్రయత్నించవద్దు. కార్డ్ లేదా బటన్ వంటి ఒకే భాగాన్ని తీసుకుని, దాని ఫాంట్ పరిమాణాన్ని నిర్ణయించి, దాని ప్రతి ఖాళీ విలువను ఆ పరిమాణానికి వ్యతిరేకంగా మార్చండి. భాగం పూర్తయ్యాక, దాన్ని రెండు లేదా మూడు వచనం పరిమాణాలలో పరీక్షించండి. తర్వాత తదుపరి దానికి వెళ్లండి.
గుండ్రని విలువలకు కాదు, బేసి విలువలకు కాలిక్యులేటర్ వాడండి
8, 16, 24 పిక్సెల్ల వంటి విలువలు బేస్ 16 వద్ద చక్కని em సంఖ్యలకు మారతాయి. 22 లేదా 13 వంటి బేసి విలువలు పొడవైన దశాంశాలను ఇస్తాయి. వీటికి px ను em గా మార్చేటప్పుడు, డిజైన్కు నిజంగా ఖచ్చితమైన సంఖ్య కావాలా, లేక దగ్గరి గుండ్రని em విలువ అంతే బాగుంటుందా అని నిర్ణయించండి. డిజైనర్లు తరచూ గుండ్రం చేయడానికి సంతోషిస్తారు, చక్కని స్టైల్షీట్ నిర్వహించడం సులభం.
బేస్ రికార్డు ఉంచండి
ప్రతి em విలువ పక్కన బేస్ ఏమిటో చెప్పే చిన్న కామెంట్ తర్వాతి వ్యక్తికి సహాయపడుతుంది. తర్వాత ఎవరైనా భాగం ఫాంట్ పరిమాణాన్ని మారిస్తే, ఖాళీ దాన్ని అనుసరించడం ప్రమాదవశాత్తు కాదు, డిజైన్ ప్రకారమే అని వారికి తెలుస్తుంది. దాన్ని ఒకసారి రాయడం, పట్టే సమయానికి తగినది.
rem సమానంతో పోల్చండి
em లేదా rem ఏది విలువకు సరిపోతుందో మీకు తెలియకపోతే, px ను em కు, rem కు మార్చి, వచనం పరిమాణం మారినప్పుడు ఏం జరగాలో ఆలోచించండి. విలువ ఎలిమెంట్ సొంత వచనాన్ని అనుసరించాలంటే em తీసుకోండి. పేజీని అనుసరించాలంటే rem తీసుకోండి.
సంబంధిత కన్వర్టర్లు
ఇదే సాధన కుటుంబం పొరుగు మార్పిడులను కవర్ చేస్తుంది. తిరిగి పిక్సెల్లకు వెళ్లడానికి, em ను px గా వాడండి. రూట్కు సాపేక్ష సైజుల కోసం, px ను rem గా, rem ను px గా ఉన్నాయి, స్క్రీన్కు సాపేక్ష సైజుల కోసం px ను vw గా, vw ను px గా. అదే స్టైల్షీట్లోని రంగుల కోసం, HEX ను RGB గా, HEX ను HSL గా సంకేతాలను నిర్వహిస్తాయి.
పరిష్కరించిన ఉదాహరణ
బటన్ లేబుల్ 14 px అనుకోండి, డిజైన్ బటన్కు 10 px నిలువు ప్యాడింగ్, 20 px అడ్డం ప్యాడింగ్ ఇస్తుంది. మీరు బేస్గా 14 టైప్ చేసి, 10 టైప్ చేసి 0.714 em చదువుతారు, 20 టైప్ చేసి 1.429 em చదువుతారు. స్టైల్షీట్లో padding: 0.714em 1.429em రాస్తారు. అదే బటన్ 18 px లేబుల్ ఉన్న హీరోలో వాడినప్పుడు, ప్యాడింగ్ అనుపాతంలో 12.9 px, 25.7 px అవుతుంది. మీరు 10px, 20px రాసి ఉంటే, పెద్ద వచనం చుట్టూ బటన్ సన్నగా కనిపించేది.
చిన్న చెక్లిస్ట్
మార్చే ముందు
విలువ ఏ ప్రాపర్టీకి చెందినదో నిర్ణయించి, అది ఏ ఫాంట్ పరిమాణానికి సాపేక్షంగా ఉండాలో కనుగొనండి.
మార్చేటప్పుడు
పిక్సెల్ విలువను, సరైన బేస్ను టైప్ చేసి, em సంఖ్యను యూనిట్తో కాపీ చేయండి.
మార్చిన తర్వాత
బ్రౌజర్లో భాగం ఫాంట్ పరిమాణాన్ని మార్చి, ఖాళీ అనుసరిస్తోందో తనిఖీ చేయండి. కూడుకునే నెస్ట్ అయిన em విలువల కోసం చూడండి.
సాధారణ పొరపాట్లు
ప్యాడింగ్కు రూట్ పరిమాణాన్ని బేస్గా వాడటం
అది rem పని. em ఎలిమెంట్ సొంత ఫాంట్ పరిమాణాన్ని సూచిస్తుంది.
ప్రతి ఫాంట్ పరిమాణానికి em వాడటం
నెస్ట్ అయిన em ఫాంట్ పరిమాణాలు కూడుకుని మిమ్మల్ని ఆశ్చర్యపరుస్తాయి. ఫాంట్ పరిమాణాలకు rem వాడండి.
దృశ్యపరంగా చక్కని కానీ తప్పు సంఖ్యకు గుండ్రం చేయడం
పెద్ద ఫాంట్తో గుణించినప్పుడు 1.43, 1.5 ఒకటి కాదు. తగినన్ని అంకెలు ఉంచండి.
మీ సంఖ్యలు మీ పరికరంలోనే ఉంటాయి
లెక్క స్థానికంగా జరుగుతుంది. మీ విలువలను మీ బ్రౌజరే వాడుతుంది, ఏదీ ఎక్కడికీ పంపబడదు. తర్వాత తొలగించడానికి ఏమీ లేదు, సృష్టించడానికి ఖాతా లేదు. px ను em గా మార్చడానికి అదే సరళమైన మార్గం.
సారాంశం
ఇక్కడ px ను em గా మార్చడానికి, పిక్సెల్లలో సైజును, అది సాపేక్షంగా ఉండే ఫాంట్ పరిమాణాన్ని టైప్ చేసి, em = px ÷ base ఫార్ములాతో ఫలితాన్ని వెంటనే చదవండి. మార్పిడి విలువ వాడే చోట అమలులో ఉన్న ఫాంట్ పరిమాణానికి సంబంధించిన అనుపాతాన్ని ఉంచుతుంది. అది పేజీకి ఒకే సమాధానం ఇవ్వలేదు: em ఎలిమెంట్ సొంత ఫాంట్ పరిమాణానికి, font-size కు అయితే పేరెంట్కు సాపేక్షం, కాబట్టి అదే 1.5 em 16 px ఎలిమెంట్లో 24 px, 24 px ఎలిమెంట్లో 36 px అవుతుంది, em లోపల em గుణిస్తుంది. ప్రతిచోటా నిలిచే ఒకే సంఖ్య కోసం, rem వాడండి. ఏదీ అప్లోడ్ కాదు.