Home-theater-designers
మీరు వెబ్ పేజీలను నిర్మించేటప్పుడు టెక్స్ట్ యొక్క ఫాంట్-పరిమాణాన్ని అనుకూలీకరించడానికి కొన్ని CSS యూనిట్లను నేర్చుకోబోతున్నారు. pt, pc, ex, మొదలైన అనేక యూనిట్లు ఉన్నాయి, కానీ చాలా సందర్భాలలో మీరు మూడు అత్యంత ప్రజాదరణ పొందిన యూనిట్లపై దృష్టి పెట్టాలి: px, em మరియు rem. చాలా మంది డెవలపర్‌లు సాధారణంగా ఈ యూనిట్ల మధ్య తేడాలు ఏమిటో అర్థం చేసుకోలేరు; కాబట్టి, ఈ యూనిట్ల యొక్క వివరణాత్మక వివరణ క్రింద ఉంది.
రోజు యొక్క వీడియోను తయారు చేయండి
కొనసాగడానికి ముందు, రెండు రకాల యూనిట్ పొడవులు ఉన్నాయని గమనించండి: సంపూర్ణ మరియు బంధువు .
సంపూర్ణ పొడవులు
సంపూర్ణ పొడవు యూనిట్లు స్థిరంగా ఉంటాయి మరియు వీటిలో దేనిలోనైనా వ్యక్తీకరించబడిన పొడవు ఖచ్చితంగా ఆ పరిమాణంలో కనిపిస్తుంది.
స్క్రీన్ పరిమాణాలు చాలా మారుతున్నందున, స్క్రీన్‌పై ఉపయోగించడానికి సంపూర్ణ పొడవు యూనిట్లు సిఫార్సు చేయబడవు. అయినప్పటికీ, ప్రింటెడ్ లేఅవుట్ వంటి అవుట్పుట్ మాధ్యమం తెలిసినట్లయితే వాటిని ఉపయోగించవచ్చు.
| యూనిట్ | వివరణ |
|---|---|
| సెం.మీ | సెంటీమీటర్లు |
| మి.మీ | మిల్లీమీటర్లు |
| లో | అంగుళాలు (1in = 96px = 2.54cm) |
| px * | పిక్సెల్‌లు (1px = 1inలో 1/96వ వంతు) |
| pt | పాయింట్లు (1pt = 1/72/1in) |
| pc | స్పేడ్స్ (1pc = 12pt) |
సాపేక్ష పొడవులు
సాపేక్ష పొడవు యూనిట్లు మరొక పొడవు ఆస్తికి సంబంధించి పొడవును పేర్కొంటాయి. విభిన్న రెండరింగ్ మీడియం మధ్య సాపేక్ష పొడవు యూనిట్లు మెరుగ్గా ఉంటాయి.
| యూనిట్ | సంబంధిత | |
|---|---|---|
| లో* | మూలకం యొక్క ఫాంట్-పరిమాణానికి సంబంధించి (2em అంటే ప్రస్తుత ఫాంట్ పరిమాణం కంటే 2 రెట్లు) | |
| ఉదా | ప్రస్తుత ఫాంట్ యొక్క x-ఎత్తుకు సంబంధించి (అరుదుగా ఉపయోగించబడుతుంది) | |
| చ | '0' (సున్నా) వెడల్పుకు సంబంధించి | |
| rem* | మూల మూలకం యొక్క ఫాంట్-పరిమాణానికి సంబంధించి | |
| vw | వీక్షణపోర్ట్ వెడల్పులో 1%కి సంబంధించి* | |
| vh | వ్యూపోర్ట్ ఎత్తులో 1%కి సంబంధించి* | |
| నిమి | వీక్షణపోర్ట్ యొక్క 1%కి సంబంధించి * చిన్న పరిమాణం | |
| vmax | వీక్షణపోర్ట్* పెద్ద పరిమాణంలో 1%కి సంబంధించి | |
| % | మాతృ మూలకానికి సంబంధించి |
1. Px (పిక్సెల్)
Pixel బహుశా CSSలో ఎక్కువగా ఉపయోగించే యూనిట్ మరియు వెబ్‌పేజీలలో టెక్స్ట్ యొక్క ఫాంట్-పరిమాణాన్ని సెట్ చేయడానికి వచ్చినప్పుడు చాలా ప్రజాదరణ పొందింది. ప్రింట్ మీడియాలో ఒక పిక్సెల్ (1px) ఒక అంగుళంలో 1/96వ వంతుగా నిర్వచించబడింది.
కంప్యూటర్ స్క్రీన్‌లపై అయితే, అవి సాధారణంగా మీరు అనుకున్నట్లుగా సెంటీమీటర్లు మరియు అంగుళాలు వంటి వాస్తవ కొలతలకు సంబంధించినవి కావు; అవి చిన్నవిగా కానీ కనిపించేవిగా మాత్రమే నిర్వచించబడ్డాయి. కనిపించేది పరికరంపై ఆధారపడి ఉంటుంది.
వేర్వేరు పరికరాలు వాటి స్క్రీన్‌లపై అంగుళానికి వేర్వేరు సంఖ్యలో పిక్సెల్‌లను కలిగి ఉంటాయి, దీనిని పిక్సెల్ సాంద్రత అంటారు. మీరు పరికరంలోని కంటెంట్ పరిమాణాన్ని గుర్తించడానికి పరికరం స్క్రీన్‌పై భౌతిక పిక్సెల్‌ల సంఖ్యను ఉపయోగించినట్లయితే, అన్ని పరిమాణాల స్క్రీన్‌లలో విషయాలు ఒకే విధంగా కనిపించేలా చేయడంలో మీకు సమస్య ఉంటుంది.
ప్రాథమిక Google ఖాతాను ఎలా సెట్ చేయాలి
డివైజ్ పిక్సెల్ రేషియో ఇక్కడ వస్తుంది. ఇది పరికరం స్క్రీన్‌పై CSS పిక్సెల్ (1px) ఎంత స్థలాన్ని తీసుకుంటుందో లెక్కించడానికి ఒక మార్గం, ఇది మరొక పరికరంతో పోల్చినప్పుడు అదే పరిమాణంలో కనిపించేలా చేస్తుంది.
క్రింద ఒక ఉదాహరణ:-
<div class="container">
<div>
<h1>This is a paragraph</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
omnis at! Officiis praesentium officia, nemo veniam consequatur
nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
amet possimus iure impedit assumenda distinctio aliquid debitis, autem
vel ullam aut, quod corporis ratione atque ducimus dolorum.
</p>
</div>
</div>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container div {
max-width: 500px;
padding: 5px 20px;
border: 1px grey solid;
border-radius: 10px;
}
p {
font-size: 16px;
}అవుట్పుట్
ల్యాప్‌టాప్ వంటి పెద్ద స్క్రీన్‌పై ప్రదర్శించినప్పుడు ఎగువ పెట్టె ఎలా కనిపిస్తుంది మరియు దిగువ పెట్టె అది ఎలా కనిపిస్తుంది ఫోన్ వంటి చిన్న స్క్రీన్‌పై ప్రదర్శించబడినప్పుడు .
రెండు పెట్టెల్లోని వచనం ఒకే పరిమాణంలో ఎలా ఉందో గమనించండి, ప్రాథమికంగా పిక్సెల్ ఎలా పనిచేస్తుందో. ఇది వెబ్ కంటెంట్ (కేవలం వచనం మాత్రమే కాదు) పరికరాల అంతటా ఒకే పరిమాణంలో కనిపించడంలో సహాయపడుతుంది.
2. నేను (ఎం)
చాలా CSS యూనిట్లు టైపోగ్రఫీ నుండి వచ్చినందున em యూనిట్‌కు పెద్ద అక్షరం 'M' (em) నుండి దాని పేరు వచ్చింది. ఇది మాతృ మూలకం యొక్క ప్రస్తుత ఫాంట్-పరిమాణాన్ని దాని బేస్‌గా ఉపయోగిస్తుంది. ఇది పేరెంట్ నుండి సంక్రమించిన ఫాంట్-సైజ్ ఆధారంగా మూలకం యొక్క ఫాంట్-సైజ్‌ని పెంచడానికి లేదా తగ్గించడానికి ఉపయోగించబడుతుంది.
మీకు 16px ఫాంట్ సైజు ఉన్న పేరెంట్ డివి ఉందని అనుకుందాం. మీరు ఆ divలో ఒక పేరా ఎలిమెంట్‌ని సృష్టించి, దానికి 1em ఫాంట్-సైజ్ ఇస్తే, పేరా ఫాంట్ పరిమాణం 16px అవుతుంది.
అయితే, మీరు మరొక పేరాకు 2em యొక్క ఫాంట్-పరిమాణాన్ని ఇస్తే అది 32pxకి అనువదిస్తుంది. దిగువ ఉదాహరణను పరిగణించండి:
<div class="div-one">
<p class="one-em">1 em based on 10px</p>
<p class="two-em">2 em based on 10px</p>
</div>
<div class="div-two">
<p class="one-em">1 em based on 10px</p>
<p class="two-em">2 em based on 10px</p>
</div>
</div>
.div-one {
font-size: 15px;
}
.div-two {
font-size: 20px;
}
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}అవుట్పుట్
టెక్స్ట్ యొక్క పరిమాణాన్ని em ఎలా స్కేల్ చేయగలదో మరియు మాతృ కంటైనర్ నుండి సంక్రమించిన ప్రస్తుత ఫాంట్ పరిమాణం ద్వారా ఇది ఎలా ప్రభావితమవుతుందో మీరు చూడవచ్చు. ముఖ్యంగా క్లిష్టమైన నిర్మాణాత్మక పేజీలలో emని ఉపయోగించడం మంచిది కాదు.
సరిగ్గా ఉపయోగించకుంటే, మీరు DOM ట్రీలో పరిమాణాల సంక్లిష్ట వారసత్వం ఆధారంగా మూలకాలు సరైన పరిమాణంలో ఉండకపోయే స్కేలింగ్ సమస్యలను ఎదుర్కొంటారు.
3. రెమ్ (రూట్ ఎమ్)
Rem దాదాపు em వలెనే పని చేస్తుంది, కానీ ప్రధాన వ్యత్యాసం ఏమిటంటే, rem అనేది పేరెంట్ ఫాంట్-సైజ్ కాకుండా పేజీలోని మూల మూలకం యొక్క ఫాంట్-పరిమాణాన్ని మాత్రమే సూచిస్తుంది. రూట్ ఫాంట్-పరిమాణం అనేది వినియోగదారు వారి బ్రౌజర్ సెట్టింగ్‌లలో లేదా డెవలపర్ ద్వారా పేర్కొనబడిన డిఫాల్ట్ ఫాంట్-పరిమాణం.
వెబ్ బ్రౌజర్ యొక్క డిఫాల్ట్ ఫాంట్ పరిమాణం సాధారణంగా 16px కాబట్టి 1rem 16px మరియు 2rem 32px ఉంటుంది. అయితే, రూట్ ఫాంట్-సైజ్ 10pxకి మార్చబడిన సందర్భంలో ఉదాహరణకు; 1rem 10px మరియు 2rem 20px ఉంటుంది.
విండోస్‌లో మాక్ ఓఎస్‌ని ఎలా ఇన్‌స్టాల్ చేయాలి
విషయాలు స్పష్టంగా చెప్పడానికి ఇక్కడ ఒక ఉదాహరణ:
<div class="div-one">
<!-- EM -->
<p class="one-em">1 em based on container (40px)</p>
<p class="two-em">2 em based on container (40px)</p>
<!-- REM -->
<p class="one-rem">1 rem based on root (16px)</p>
<p class="two-rem">2 rem based on root (16px)</p>
</div>
.div-one {
font-size: 40px;
}
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}
.one-rem {
font-size: 1rem;
}
.two-rem {
font-size: 2rem;
}
అవుట్పుట్
మీరు చూడగలిగినట్లుగా, REM యూనిట్‌లతో నిర్వచించబడిన పేరాగ్రాఫ్‌లు మా కంటైనర్‌లో డిక్లేర్ చేయబడిన ఫాంట్ పరిమాణంతో పూర్తిగా కలవరపడవు మరియు వాటికి సంబంధించి ఖచ్చితంగా రెండర్ చేయబడతాయి రూట్ ఫాంట్ పరిమాణం HTML ఎలిమెంట్ సెలెక్టర్‌లో నిర్వచించబడింది.
Px vs. Em vs. Rem: ఏ యూనిట్ ఉత్తమమైనది?
సమూహ మూలకాల యొక్క సంక్లిష్ట సోపానక్రమాన్ని కలిగి ఉండే అవకాశం కారణంగా Em సిఫార్సు చేయబడదు. REM సాధారణంగా PXకి విరుద్ధంగా బ్రౌజర్ సెట్టింగ్‌లలో పేర్కొన్న కొత్త డిఫాల్ట్/బేస్ ఫాంట్ పరిమాణంతో సముచితంగా స్కేల్ చేయబడుతుంది. మీ వెబ్ పేజీలలో టెక్స్ట్ కంటెంట్‌తో పని చేస్తున్నప్పుడు మీరు REMని ఎందుకు ఉపయోగించాలో ఇది వివరిస్తుంది. REM రేసులో గెలుస్తుంది. REMతో మీ కంటెంట్‌ను మెరుగైన స్టైలింగ్ మరియు స్కేలింగ్ వెబ్‌సైట్ సృష్టికర్తలకు అనువైనది కనుక మీ సైట్‌కు మెరుపును జోడిస్తుంది. మీ కంటెంట్ యొక్క ఆన్-పాయింట్ కొలతలు మీ వెబ్‌సైట్ రూపాన్ని మరియు అనుభూతిని నిర్దేశిస్తాయి, అయితే, మీరు సృజనాత్మకతను పొందాలి.