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

డిజైనర్లు, డెవలపర్లు px ను rem గా ఎందుకు మారుస్తారు

డిజైన్ సాధనాలు పిక్సెల్‌లలో మాట్లాడతాయి. హెడ్డింగ్ 32 px, సెక్షన్ల మధ్య ఖాళీ 48 px, బటన్‌కు 16 px ప్యాడింగ్ అని మాక్‌అప్ చెబుతుంది. చక్కగా రాసిన స్టైల్‌షీట్‌లు rem లో మాట్లాడతాయి. ఆ రెండు భాషల మధ్య అంతరంలోనే ఈ పేజీ ఉంది: మీరు పిక్సెల్‌లలో సైజును టైప్ చేసి rem లో చదువుతారు, తద్వారా CSS లో మీరు ఉంచే సంఖ్య డిజైనర్ ఉద్దేశించిన దాన్నే సూచిస్తుంది. px ను rem గా మార్చడం చిన్న పని, కానీ వెబ్‌సైట్ జీవితంలో అది వందల సార్లు జరుగుతుంది, తప్పు బేస్ జాగ్రత్తగా చేసిన లేఅవుట్‌ను ప్రతిచోటా ఒకేసారి కొద్దిగా తప్పుగా మారుస్తుంది.

rem ను ఎందుకు పట్టించుకోవాలంటే, అందుబాటు, సరళత కోసం. rem అనేది రూట్ ఫాంట్ పరిమాణం యొక్క గుణిజం, చెప్పకపోతే బ్రౌజర్ దాన్ని 16 px గా సెట్ చేస్తుంది, పాఠకుడు తన సెట్టింగ్‌లలో దాన్ని మార్చుకోవచ్చు. కాబట్టి rem లో రాసిన లేఅవుట్, కంటి చూపు సరిగా లేని వ్యక్తి డిఫాల్ట్ వచనం పరిమాణాన్ని పెంచినప్పుడు తన ఆకారాన్ని నిలుపుకుంటుంది: అక్షరాలు, ఖాళీ, బాక్స్‌లు కలిసి పెరుగుతాయి. పిక్సెల్‌లలో రాసిన లేఅవుట్ అనుసరించదు, పెద్ద వచనం అడిగిన పాఠకుడికి ఇరుకైన బాక్స్‌లలో పెద్ద అక్షరాలు వస్తాయి, లేదా ఏమీ రాదు. అందుకే దాదాపు ప్రతి ఆధునిక స్టైల్ గైడ్ ఒకే మాట చెబుతుంది: అక్షరాలకు, ఖాళీకి rem వాడండి.

ఈ పేజీ లెక్కను మీ బ్రౌజర్‌లో చేస్తుంది. ఏదీ అప్‌లోడ్ కాదు, మార్పిడి ఆధారపడే బేస్ సైజు మీ వెనుక ఊహించబడకుండా, కింద రాయబడి, మీరు మార్చగల ఫీల్డ్‌లో ఉంటుంది. కింద మీకు ఫార్ములా, సాధారణ సైజుల పట్టిక, బేస్ ఎందుకు ముఖ్యమో కారణాలు, హడావిడిగా px ను rem గా మార్చేవారిని పట్టుకునే ఉచ్చులు, ఫలితాన్ని నిజమైన స్టైల్‌షీట్‌లలో వాడటానికి చిన్న మార్గదర్శి కనిపిస్తాయి.

ఫార్ములా, బేస్

rem = px ను బేస్‌తో భాగించినది

ఫార్ములా ఒక భాగహారం: rem = px ÷ base. సాధారణ బేస్ 16 px తో, 24 px సైజు 1.5 rem అవుతుంది, 32 px 2 rem అవుతుంది, 8 px 0.5 rem అవుతుంది. మీరు టైప్ చేస్తున్నప్పుడే పేజీ ఫలితాన్ని చూపుతుంది, వాడిన బేస్‌ను కూడా చూపుతుంది, కాబట్టి 24 px = 1.5 rem (16 px) పంక్తి ఏది ఊహించబడిందో ఖచ్చితంగా చెబుతుంది.

16 ఎక్కడ నుంచి వస్తుంది

ఎవరూ ఏమీ చెప్పనప్పుడు బ్రౌజర్ వాడేది అదే కాబట్టి బేస్ 16 px వద్ద మొదలవుతుంది. అది వెబ్ చట్టం కాదు; అది డిఫాల్ట్‌కు డిఫాల్ట్, దశాబ్దాలుగా స్థిరంగా ఉంది. మీ CSS రూట్ ఫాంట్ పరిమాణాన్ని ఎప్పుడూ తాకకపోతే, చాలా మంది సందర్శకులకు 1 rem అంటే 16 px. తాకితే, బేస్ మీరు సెట్ చేసినదే.

62.5% ట్రిక్, ప్రజలు దీన్ని ఎందుకు వాడతారు

కొన్ని స్టైల్‌షీట్‌లు రూట్ సైజును 62.5% కు సెట్ చేస్తాయి, ఇది డిఫాల్ట్ బ్రౌజర్‌లో 1 rem ను 10 px కు సమానం చేస్తుంది, తద్వారా 24 px అంటే సరిగ్గా 2.4 rem, లెక్క మనసులోనే చేయడం సులభం. ఇది పని చేస్తుంది, కానీ ఖర్చు ఉంది: మొత్తం పేజీ ఇప్పుడు ఆ శాతంపై ఆధారపడుతుంది, బేస్ 16 అని ఆశించే ఏ భాగమైనా చాలా చిన్నదిగా వస్తుంది. మీ ప్రాజెక్ట్ ఇలా చేస్తుంటే, ఈ పేజీ బేస్ ఫీల్డ్‌లో 10 టైప్ చేయండి, ప్రతి సంఖ్య మీ CSS తో సరిపోతుంది.

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

అనుపాతాన్ని ఉంచుతుంది

ఒక rem అంటే రూట్ ఫాంట్ పరిమాణం ఏదైనా అదే, కాబట్టి rem లో రాసిన లేఅవుట్ ఆ పరిమాణం మారినప్పుడు తన ఆకారాన్ని నిలుపుకుంటుంది. అలా రాయడానికి మొత్తం కారణం అదే. px ను rem గా మార్చినప్పుడు, మీకు వచ్చే సంఖ్య మీరు ఎంచుకున్న బేస్ వద్ద పిక్సెల్ విలువకు ఉన్న అదే అనుపాతం, ఇప్పుడు స్కేల్ అయ్యే రీతిలో వ్యక్తపరచబడింది.

మీ పాఠకుడి సెట్టింగ్‌లు దీనికి తెలియవు

సంఖ్య పూర్తిగా బేస్‌పై ఆధారపడుతుంది. మీ CSS రూట్ ఎలిమెంట్‌పై వేరే సైజును సెట్ చేస్తే, లేదా పాఠకుడు తన బ్రౌజర్‌లో డిఫాల్ట్ వచనం పరిమాణాన్ని మార్చుకుంటే, చాలా మంది అలా చేస్తారు, చేసే హక్కు ఉంది, అప్పుడు వారికి 1 rem అంటే 16 px కాదు. పేజీలోని సంఖ్య ఫీల్డ్‌లోని బేస్‌కు మాత్రమే సరైనది. ఇది సాధనం లోపం కాదు, యూనిట్ స్వభావం: అది సాపేక్షమైనది, సాపేక్ష యూనిట్‌కు మారడానికి స్థిర విలువ ఉండదు.

రౌండింగ్

16 తో భాగించడం చాలా సాధారణ సైజులకు (16, 24, 32, 48, 64) స్పష్టమైన ఫలితాలను, ఇతరాలకు పునరావృత దశాంశాలను ఇస్తుంది (10 px అంటే 0.625 rem; 13 px అంటే 0.8125). పేజీ సంఖ్యకు అవసరమైనన్ని అంకెలు ఇస్తుంది, స్టైల్‌షీట్‌లో ఎన్ని ఉంచాలో మీరు నిర్ణయిస్తారు. బ్రౌజర్‌లు పొడవైన దశాంశాలను సమస్య లేకుండా నిర్వహిస్తాయి, కానీ 0.8125rem వంటి గుండ్రం చేసిన విలువ పది అంకెలు ఉన్న దాని కంటే చదవడానికి, నిర్వహించడానికి సులభం.

సాధారణ సైజులు

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

కన్వర్టర్ కింద సాధారణ సైజుల పట్టిక మీకు కనిపిస్తుంది: 8 px అంటే 0.5 rem, 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. టైప్ స్కేల్‌లు, ఖాళీ వ్యవస్థలలో ఈ సైజులే ఎక్కువగా కనిపిస్తాయి, వాటిని మీ ముందు ఉంచుకోవడం ఒక మార్పిడిని ఆదా చేస్తుంది.

rem పై నిర్మించిన స్కేల్

చిన్న rem విలువల సమితిని ఎంచుకుని వాటినే మళ్లీ వాడటం ఉపయోగకరమైన అలవాటు: ఖాళీకి 0.5, 1, 1.5, 2, 3, 4, అక్షరాలకు 0.875, 1, 1.25, 1.5, 2. డిజైనర్లు దీన్ని స్కేల్ అంటారు, ఇది సైట్‌ను దృశ్యపరంగా స్థిరంగా ఉంచుతుంది. మాక్‌అప్ మీకు 22 px వంటి బేసి విలువ ఇస్తే, అది 1.375 rem అని చూడటానికి కన్వర్టర్‌ను వాడి, మీ స్కేల్‌లోని దగ్గరి విలువకు గుండ్రం చేయాలా అని నిర్ణయించండి.

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

పిక్సెల్ విలువను టైప్ చేయండి

మొదటి ఫీల్డ్‌లో పిక్సెల్‌లలో సైజును నమోదు చేయండి. దశాంశాలు అంగీకరించబడతాయి, కాబట్టి 13.5 px కూడా 14 లాగే పని చేస్తుంది.

బేస్‌ను తనిఖీ చేయండి

మీ CSS రూట్ సైజును మార్చకపోతే 16 వద్ద ఉంచండి. మారిస్తే, మార్చండి. మీరు టైప్ చేస్తుండగా ఫలితం నవీకరించబడుతుంది.

rem విలువను కాపీ చేయండి

సంఖ్యను చదివి, యూనిట్‌ను దాని తర్వాత రాసి మీ CSS లో వాడండి: font-size: 1.5rem. యూనిట్‌ను మరచిపోవద్దు, ఎందుకంటే చాలా ప్రాపర్టీలలో యూనిట్ లేని సంఖ్య వేరే అర్థం ఇస్తుంది.

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

CSS పిక్సెల్ మీ స్క్రీన్ పిక్సెల్ కాదు

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

rem ఎందుకు ఉంది

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

ఆచరణలో rem ఎక్కడ ఎదురవుతుంది

అక్షరాలు

బాడీ వచనం సాధారణంగా 1 rem, హెడ్డింగ్‌లు 1.25 నుంచి 3 rem, చిన్న అక్షరాలు 0.75 నుంచి 0.875 rem. వాటిని rem లో రాయడం పాఠకుడు ఒకే బ్రౌజర్ సెట్టింగ్ మార్చి మొత్తం పేజీని పెద్దది చేసుకునేలా చేస్తుంది.

ఖాళీ, లేఅవుట్

rem లో మార్జిన్‌లు, ప్యాడింగ్, గ్యాప్‌లు ఖాళీ స్థలాన్ని అక్షరాలకు అనుపాతంలో ఉంచుతాయి. వచనం పెరిగినప్పుడు, దాని చుట్టూ ఖాళీ కూడా పెరుగుతుంది, పెద్ద అక్షరాలను పాత బాక్స్‌లలో కుక్కడానికి బదులు లేఅవుట్ సమతుల్యంగా ఉంటుంది.

మీడియా క్వెరీలు

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

పిక్సెల్‌లలో వదిలేయాల్సినవి

సన్నని అంచులు, బాక్స్ షాడోలు, సన్నని ఐకాన్‌లు తరచూ స్థిర పిక్సెల్ సైజులలో ఉత్తమంగా కనిపిస్తాయి, ఎందుకంటే పెద్ద వచనంతో 0.1rem కు పెరిగే 0.0625rem అంచు ఎవరికీ సహాయపడదు. స్కేల్ కావాల్సిన వాటికి rem, కాకూడని వాటికి పిక్సెల్‌లు వాడండి.

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

బేస్ ఎల్లప్పుడూ 16 కాదని మరచిపోవడం

ప్రాజెక్ట్ html { font-size: 62.5% } సెట్ చేస్తే, లేదా ద్రవ రూట్ సైజు వాడితే, కారకం వేరు. ఈ పేజీతో సహా ఏ కన్వర్టర్ సంఖ్యనైనా నమ్మే ముందు స్టైల్‌షీట్‌ను తనిఖీ చేయండి.

రూట్ సైజునే మార్చడం

రూట్ సైజును పిక్సెల్‌లలో సెట్ చేస్తే, పాఠకుడి బ్రౌజర్ సెట్టింగ్ అధిగమించబడుతుంది, rem ప్రయోజనం పోతుంది. రూట్‌ను శాతంగా సెట్ చేయండి, లేదా వదిలేయండి, తద్వారా వినియోగదారు ప్రాధాన్యత గౌరవించబడుతుంది.

తన సొంత ఫాంట్ పరిమాణం సెట్ చేసే భాగం లోపల rem వాడటం

rem ఎల్లప్పుడూ రూట్‌ను సూచిస్తుంది, భాగాన్ని కాదు. 14 px ఫాంట్ సైజు, 1rem ప్యాడింగ్ ఉన్న బటన్‌కు ప్యాడింగ్ బటన్ సొంత వచనాన్ని అనుసరించదు. ఎలిమెంట్ వచనాన్ని అనుసరించే ఖాళీ కావాలంటే, అది em పని.

ప్రణాళిక లేకుండా యూనిట్లను కలపడం

ఒక మార్జిన్‌కు px, తర్వాతదానికి rem, మూడవదానికి em వాడే స్టైల్‌షీట్ గురించి తర్కించడం కష్టం. ఒక నియమాన్ని ఎంచుకోండి: అక్షరాలకు, ఖాళీకి rem, అంచులకు, షాడోలకు పిక్సెల్‌లు, దానికి కట్టుబడి ఉండండి.

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

16 px అంటే ఎన్ని rem?

డిఫాల్ట్ బ్రౌజర్‌లో ఒకటి. పదహారును పదహారు బేస్‌తో భాగిస్తే.

rem, px కంటే మంచిదా?

అక్షరాలకు, ఖాళీకి, చాలా ప్రాజెక్ట్‌లలో అదే మంచి ఎంపిక, ఎందుకంటే అది పాఠకుడి సెట్టింగ్‌లను గౌరవిస్తుంది. స్కేల్ కాకూడని వాటికి పిక్సెల్‌లు ఇప్పటికీ సరైనవి.

నా ఫలితం మరో సైట్ కంటే ఎందుకు భిన్నంగా ఉంది?

బహుశా వేరే బేస్ కావచ్చు. ఫీల్డ్‌ను తనిఖీ చేయండి: కొన్ని సాధనాలు 10 అనుకుంటాయి, కొన్ని 16, కొన్ని 14. ఈ పేజీ ఫలితం పక్కన బేస్‌ను చూపుతుంది.

నేను గుండ్రం చేయాలా?

లేదు. బ్రౌజర్‌లు పొడవైన దశాంశాలను అంగీకరిస్తాయి. చదవడానికి సులభంగా ఉండటానికి మాత్రమే గుండ్రం చేయండి.

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

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

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

rem ను px గా వాడండి, అది భాగించడానికి బదులు గుణిస్తుంది.

px ను rem గా మార్చేటప్పుడు తెలివిగా ఎంచుకోవడం

ప్రాజెక్ట్‌కు ఒక బేస్‌ను నిర్ణయించి దానికి కట్టుబడి ఉండండి

ఏది ఎంచుకున్నా, దాన్ని నిర్ణయంగా చేసి ప్రాజెక్ట్ డాక్యుమెంటేషన్‌లో రాయండి. బేస్ గురించి విభేదించే బృందం ఒకదానితో ఒకటి సరిపోని భాగాలను ఉత్పత్తి చేస్తుంది.

చివరి క్షణంలో కాదు, డిజైన్ దశలో మార్చండి

మాక్‌అప్ చదువుతూనే px ను rem గా మారిస్తే, స్కేల్‌ను డిజైన్‌లోనే నిర్మిస్తారు, బేసి విలువలను ముందే గమనిస్తారు. చివర్లో చేస్తే, వాటిని అస్థిరమైన సంఖ్యల రాశిగా కనుగొంటారు.

వ్యూపోర్ట్ యూనిట్లను కూడా పరిగణించండి

స్క్రీన్‌ను నింపాల్సిన హెడ్డింగ్‌లకు, px ను vw గా సైజును వ్యూపోర్ట్ వాటాగా వ్యక్తపరుస్తుంది. అది rem కంటే భిన్నంగా స్కేల్ అవుతుంది, రెండూ తరచూ కలిపి వాడతారు.

px ను rem గా మార్చడం సులభం చేసే అలవాట్లు

మార్పిడి పట్టికను మనసులో ఉంచుకోండి

బేస్ 16 తో, కొన్ని లంగర్లు చాలా పనిని కవర్ చేస్తాయి: 4 px అంటే 0.25 rem, 8 px అంటే 0.5, 12 px అంటే 0.75, 16 px అంటే 1, 24 px అంటే 1.5, 32 px అంటే 2. మాక్‌అప్ వాటి మధ్య విలువ ఇచ్చినప్పుడు, పేజీలో px ను rem గా మార్చే ముందు మీరు అంచనా వేయవచ్చు, నిర్ధారించడానికి మాత్రమే కన్వర్టర్‌ను వాడండి. కొన్ని వారాల తర్వాత పట్టికను చూడకుండానే తెలుసుకుంటారు.

డిజైన్ వ్యవస్థను పని చేయనివ్వండి

మీ బృందం spacing-2 లేదా font-lg వంటి డిజైన్ టోకెన్‌లను ఉంచితే, వాటిని ఒకసారి rem లో నిల్వ చేసి, అందరూ పేర్లను సూచించనివ్వండి. అప్పుడు ఎవరూ మళ్లీ px ను rem గా మార్చాల్సిన అవసరం లేదు, స్కేల్‌లో మార్పు ఒకే చోట జరుగుతుంది. టోకెన్‌లను రాసేటప్పుడు కన్వర్టర్‌ను వాడతారు, వాటిని వాడేటప్పుడు కాదు.

పిక్సెల్ విలువను కామెంట్‌లో రాయండి

padding: 1.25rem; /* 20px */ వంటి పంక్తికి కొన్ని అక్షరాలు ఖర్చవుతాయి, తర్వాతి డెవలపర్‌ను కాలిక్యులేటర్ కోసం వెతకకుండా కాపాడుతుంది. మీరు ఏ బేస్ ఊహించారో కూడా అది నమోదు చేస్తుంది, తర్వాత రూట్ సైజు మారితే ఇది సహాయపడుతుంది.

మార్చిన బ్రౌజర్ సెట్టింగ్‌తో పరీక్షించండి

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

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

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

పరిష్కరించిన ఉదాహరణ

మాక్‌అప్ కార్డ్ టైటిల్‌ను 28 px, కార్డ్ ప్యాడింగ్‌ను 20 px, కార్డ్‌ల మధ్య గ్యాప్‌ను 12 px గా ఇస్తుందనుకోండి, మీ ప్రాజెక్ట్ డిఫాల్ట్ 16 px బేస్ వాడుతుంది. మీరు 28 టైప్ చేసి 1.75 rem చదువుతారు, 20 టైప్ చేసి 1.25 rem చదువుతారు, 12 టైప్ చేసి 0.75 rem చదువుతారు. స్టైల్‌షీట్‌లో font-size: 1.75rem, padding: 1.25rem, gap: 0.75rem రాస్తారు. బ్రౌజర్ వచనం పరిమాణాన్ని 20 px కు పెంచిన సందర్శకుడికి అదే కార్డ్ నాలుగో వంతు స్కేల్ అయి కనిపిస్తుంది: టైటిల్ 35 px, ప్యాడింగ్ 25 px, గ్యాప్ 15 px, అన్నీ అనుపాతంలో. మీరు పిక్సెల్‌లు రాసి ఉంటే, టైటిల్ 28 వద్దే ఉండేది, కార్డ్ తప్పుగా కనిపించేది.

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

మార్చే ముందు

మీ CSS వాడే బేస్‌ను తెలుసుకోండి. ఏ సైజులు స్కేల్ కావాలో, ఏవి కాకూడదో నిర్ణయించండి.

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

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

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

బ్రౌజర్‌లో పెద్ద డిఫాల్ట్ వచనం పరిమాణంతో పేజీని పరీక్షించి, తమ వచనాన్ని ఇక పట్టని బాక్స్‌ల కోసం చూడండి.

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

1 rem ఎల్లప్పుడూ 16 px అనుకోవడం

ఎవరూ రూట్ సైజును మార్చనప్పుడు మాత్రమే అది అలా ఉంటుంది, కొంతమంది పాఠకులు మార్చారు. ఇతర సైజులలో కూడా పని చేసేలా లేఅవుట్ రాయండి.

రూట్ సైజును పిక్సెల్‌లలో సెట్ చేయడం

అది పాఠకుడి ఎంపికను అధిగమిస్తుంది. శాతం వాడండి, లేదా సెట్ చేయవద్దు.

ప్రతిదీ మార్చడం

ప్రతి సైజూ స్కేల్ కావాల్సిన పనిలేదు. అంచులను, షాడోలను పిక్సెల్‌లలో వదిలేయండి.

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

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

సారాంశం

ఇక్కడ px ను rem గా మార్చడానికి, పిక్సెల్‌లలో సైజును టైప్ చేసి వెంటనే rem లో చదవండి, rem = px ÷ base ఫార్ములాతో. బేస్ బ్రౌజర్ డిఫాల్ట్ అయిన 16 px వద్ద మొదలవుతుంది, మీ CSS కు సరిపోయేలా మార్చవచ్చు. మార్పిడి అనుపాతాన్ని ఉంచుతుంది: rem లో రాసిన లేఅవుట్ రూట్ ఫాంట్ పరిమాణం మారినప్పుడు తన ఆకారాన్ని నిలుపుకుంటుంది. మీ పాఠకుడి సెట్టింగ్‌లు దీనికి తెలియవు, కాబట్టి సంఖ్య ఫీల్డ్‌లోని బేస్‌కు మాత్రమే సరైనది. కన్వర్టర్ కింద పట్టికలోని సాధారణ సైజులు, 8 px వద్ద 0.5 rem నుంచి 64 px వద్ద 4 rem వరకు, లెక్కను మళ్లీ చేసే శ్రమను తప్పిస్తాయి. ఏదీ అప్‌లోడ్ కాదు.