Kartama
హోమ్ పేజీయాప్‌లువ్యాసాలుగురించిసంప్రదించండి
హోమ్ పేజీ
/
యాప్‌లు
/
CSS యూనిట్ కన్వర్టర్
CSS యూనిట్ కన్వర్టర్

CSS యూనిట్ కన్వర్టర్

px, em, rem, pt, pc, in, cm, mm, vw, vh వంటి CSS యూనిట్లను తక్షణమే మార్చండి. ఖచ్చితమైన, స్టైల్‌షీట్‌లో నేరుగా వాడదగిన విలువలను ఒకేసారి చూడండి.

px, em, rem, pt, pc, in, cm, mm, vw, vh వంటి CSS యూనిట్లను తక్షణమే మార్చండి. ఖచ్చితమైన, స్టైల్‌షీట్‌లో నేరుగా వాడదగిన విలువలను ఒకేసారి చూడండి.

ఈ యాప్‌ను షేర్ చేయండి

CSS యూనిట్ కన్వర్టర్

CSS-లో డజనుకు పైగా వేర్వేరు పొడవు యూనిట్లు ఉన్నాయి - px, pt, in, cm వంటి absolute యూనిట్లు, em, rem వంటి font-relative యూనిట్లు, vw, vh వంటి viewport-relative యూనిట్లు. వీటిని కలిపేయడం స్టైల్‌షీట్‌లో అస్థిరమైన స్పేసింగ్‌కు అత్యంత సాధారణ కారణాలలో ఒకటి. ఈ టూల్ ఏ రెండు CSS యూనిట్ల మధ్యనైనా ఒక విలువను మారుస్తుంది మరియు మీరు ఇచ్చిన base font size, viewport dimensions ఉపయోగించి అదే విలువను మద్దతు ఉన్న అన్ని యూనిట్లలో ఒకేసారి చూపిస్తుంది.

Absolute యూనిట్లు

Absolute యూనిట్లు font size లేదా స్క్రీన్‌తో సంబంధం లేకుండా, ఒకదానికొకటి స్థిరంగా ఉంటాయి. బ్రౌజర్‌లు ఉపయోగించే అదే రిఫరెన్స్ (అంగుళానికి 96px) ద్వారా ఇవన్నీ పిక్సెల్‌లలోకి మారతాయి:

1 in=96 px,1 cm=962.54 px,1 mm=9625.4 px1\ in = 96\ px, \qquad 1\ cm = \frac{96}{2.54}\ px, \qquad 1\ mm = \frac{96}{25.4}\ px 1 pt=9672 px,1 pc=16 px1\ pt = \frac{96}{72}\ px, \qquad 1\ pc = 16\ px

Font-relative యూనిట్లు

rem ఎల్లప్పుడూ root (<html>) ఎలిమెంట్ యొక్క font size పై ఆధారపడి ఉంటుంది, em ప్రస్తుత ఎలిమెంట్ యొక్క font size పై ఆధారపడి ఉంటుంది. ఈ టూల్ ఒకే ఒక్క base font size అడిగి రెండింటికీ దాన్ని ఉపయోగిస్తుంది, మీరు స్టైల్ చేస్తున్న ఎలిమెంట్‌కు దాని స్వంత font-size override లేనప్పుడు ఇది ఖచ్చితంగా ఉంటుంది:

1 em=1 rem=base_font_size (px)1\ em = 1\ rem = base\_font\_size\ (px)

Viewport-relative యూనిట్లు

vw, vh అనేవి బ్రౌజర్ యొక్క viewport వెడల్పు మరియు ఎత్తు యొక్క శాతాలు, కాబట్టి వీటిని మార్చడానికి మీరు డిజైన్ చేస్తున్న viewport పరిమాణం అవసరం:

1 vw=viewport_width100 px,1 vh=viewport_height100 px1\ vw = \frac{viewport\_width}{100}\ px, \qquad 1\ vh = \frac{viewport\_height}{100}\ px

మార్పిడి ఎలా పనిచేస్తుంది

ప్రతి యూనిట్ మొదట పిక్సెల్‌ల ఉమ్మడి ఆధారానికి మార్చబడుతుంది, తర్వాత పిక్సెల్‌ల నుండి లక్ష్య యూనిట్‌కు మార్చబడుతుంది:

px=value×factorfrom,result=pxfactortopx = value \times factor_{from}, \qquad result = \frac{px}{factor_{to}}

ఈ టూల్‌ను ఎలా ఉపయోగించాలి

  1. మీరు మార్చాలనుకుంటున్న సంఖ్యా value ను నమోదు చేయండి
  2. మార్చాల్సిన యూనిట్ మరియు మార్చాల్సిన లక్ష్య యూనిట్ ఎంచుకోండి
  3. em/rem కోసం ఉపయోగించే base font size సెట్ చేయండి (డిఫాల్ట్ 16px)
  4. vw/vh కోసం ఉపయోగించే viewport width, viewport height సెట్ చేయండి
  5. మార్చబడిన విలువను మరియు అదే మొత్తాన్ని అన్ని మద్దతు గల యూనిట్లలో చూపించే పూర్తి పట్టికను చూడటానికి సమర్పించండి

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

24px ను rem గా మార్చడం, base font size 16px గా ఉన్నప్పుడు:

result=2416=1.5 remresult = \frac{24}{16} = 1.5\ rem

కాబట్టి root font size 16px అయినప్పుడు font-size: 24px మరియు font-size: 1.5rem రెండూ ఒకే రెండర్ చేయబడిన టెక్స్ట్ పరిమాణాన్ని ఇస్తాయి - అందుకే ఆధునిక, accessibility-friendly స్టైల్‌షీట్‌లో 1.5rem రాయడం ఎక్కువ సాధారణ మార్గం.