CSS Units
CSS க்கு நீளத்தை வெளிப்படுத்த பல்வேறு அலகுகள் உள்ளன.
பல CSS பண்புகள் "நீளம்" மதிப்புகளை எடுக்கும், உதாரணமாக width, margin, padding, font-size, முதலியன.
நீள மதிப்பு என்பது ஒரு எண்ணைத் தொடர்ந்து ஒரு நீள அலகு ஆகும், உதாரணமாக px, em, rem, முதலியன.
CSS க்கு இரண்டு வகையான நீள அலகுகள் உள்ளன:
- முழுமையான அலகுகள் (Absolute units)
- உறவின அலகுகள் (Relative units)
CSS Absolute Units
முழுமையான அலகுகள் நிலையானவை, மற்றும் இவற்றில் ஏதேனும் ஒன்றில் வெளிப்படுத்தப்பட்ட நீளம் சரியாக அந்த அளவில் தோன்றும்.
திரை அளவு மாறும்போது முழுமையான அலகுகள் மாறாது, மேலும் வலைத்தளங்களுக்குப் பரிந்துரைக்கப்படுவதில்லை. இருப்பினும், வெளியீடு ஊடகம் அறியப்பட்டால், அவை பயன்படுத்தப்படலாம், உதாரணமாக அச்சு தளவமைப்புக்கு.
பொதுவாகப் பயன்படுத்தப்படும் முழுமையான அலகு px (பிக்சல்கள்) ஆகும்.
| Unit | Description | Example |
|---|---|---|
| px | pixels (1px = 1/96th of 1in) | 16px |
| cm | centimeters | 5cm |
| mm | millimeters | 10mm |
| in | inches (1in = 96px = 2.54cm) | 2in |
| pt | points (1pt = 1/72 of 1in) | 12pt |
| pc | picas (1pc = 12 pt) | 1pc |
Set Font Size With Px
px (பிக்சல்கள்) உடன் உரை அளவை அமைப்பது உங்களுக்கு உரை அளவு மீது முழுமையான கட்டுப்பாட்டை அளிக்கிறது.
நீங்கள் பிக்சல்களைப் பயன்படுத்தினால், வலைப்பக்கம் வெவ்வேறு திரை அளவுகளில் நன்றாக அளவிடப்படாது மற்றும் பயனர்கள் தங்கள் உலாவி அமைப்புகளில் உரை அளவை சரிசெய்ய முடியாது. இருப்பினும், பயனர்கள் இன்னும் முழு பக்கத்தையும் மறுஅளவிட பெருக்கும் கருவியைப் பயன்படுத்தலாம்.
Example
px உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}குறிப்பு:
எண்ணுக்கும் அலகுக்கும் இடையே வெள்ளை இடம் தோன்றக்கூடாது. இருப்பினும், மதிப்பு 0 ஆக இருந்தால், அலகைத் தவிர்க்கலாம்.
CSS Relative Units
உறவின அலகுகள் மற்றொரு நீளத்துடன் தொடர்புடைய ஒரு நீளத்தை குறிப்பிடுகின்றன (பெற்றோர் உறுப்பு, ரூட் உறுப்பு அல்லது பார்வைத்துளி போன்றவை).
உறவின நீள அலகுகள் வெவ்வேறு திரை அளவுகளுக்கு இடையில் சிறப்பாக அளவிடப்படுகின்றன.
| Unit | Description | Example |
|---|---|---|
| em | பெற்றோர் உறுப்பின் font-size உடன் தொடர்புடையது | 2.5em |
| ex | தற்போதைய எழுத்துரின் x-height உடன் தொடர்புடையது (அரிதாக பயன்படுத்தப்படுகிறது) | 1ex |
| ch | "0" (பூஜ்யம்) இன் அகலத்துடன் தொடர்புடையது | 20ch |
| fr | ஒரு பகுதியளவு அலகு. 1fr என்பது கிடைக்கக்கூடிய இடத்தின் 1 பகுதிக்கு சமம் | 1fr |
| rem | ரூட் HTML உறுப்பின் font-size உடன் தொடர்புடையது | 1.5rem |
| vw | பார்வைத்துளியின்* அகலத்தில் 1% உடன் தொடர்புடையது. 100vw = பார்வைத்துளியின் முழு அகலம் | 50vw |
| vh | பார்வைத்துளியின்* உயரத்தில் 1% உடன் தொடர்புடையது. 100vh = பார்வைத்துளியின் முழு உயரம் | 100vh |
| vmin | பார்வைத்துளியின்* சிறிய பரிமாணத்தில் 1% உடன் தொடர்புடையது | 10vmin |
| vmax | பார்வைத்துளியின்* பெரிய பரிமாணத்தில் 1% உடன் தொடர்புடையது | 10vmax |
| % | பெற்றோர் உறுப்பின் அளவுடன் தொடர்புடையது | 50% |
உதவிக்குறிப்பு:
* பார்வைத்துளி = உலாவி சாளர அளவு. 1vw = உலாவியின் தற்போதைய பார்வைத்துளி அகலத்தில் 1%. எனவே, பார்வைத்துளி 500px அகலமாக இருந்தால், 1vw என்பது 5px ஆகும்.
em மற்றும் rem அலகுகள் அளவிடக்கூடிய மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்குவதற்கு சரியானவை!
Set Font Size With Em
em அலகு பெற்றோர் உறுப்பின் எழுத்துரு அளவுடன் தொடர்புடையது. எனவே, பெற்றோர் உறுப்புக்கு 16px எழுத்துரு அளவு இருந்தால், 2.5em என்பது 40px ஆக இருக்கும்.
பின்வரும் எடுத்துக்காட்டில், em இல் உள்ள உரை அளவு முந்தைய பிக்சல் எடுத்துக்காட்டில் உள்ளதைப் போலவே உள்ளது. இருப்பினும், em அலகு பயனருக்கு உலாவி அமைப்புகளில் உரை அளவை சரிசெய்ய அனுமதிக்கிறது.
Example
em உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
body {
font-size: 16px; /* அடிப்படை எழுத்துரு அளவு */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}Set Font Size With Rem
rem அலகு ரூட் HTML உறுப்பின் () எழுத்துரு அளவுடன் தொடர்புடையது.
em போலல்லாமல், இது அதன் பெற்றோர் உறுப்பின் font-size உடன் தொடர்புடையது, rem எப்போதும் உறுப்பின் font-size ஐ குறிக்கிறது, ஆவண மரத்தில் அதன் நிலை எதுவாக இருந்தாலும். இது அளவிடக்கூடிய மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்க rem ஐ மிகவும் பயனுள்ளதாக்குகிறது. உறுப்பின் font-size ஐ மாற்றுவதன் மூலம், rem அலகுகளுடன் அளவிடப்பட்ட அனைத்து உறுப்புகளும் முழு பக்கத்திலும் விகிதாசாரமாக அளவிடப்படும்.
பெரும்பாலான உலாவிகளில் உறுப்பின் இயல்புநிலை font-size, 16px ஆகும். எனவே, இயல்பாக, CSS இல் வெளிப்படையாக மேலெழுதப்படாத வரை, 1rem என்பது 16px க்கு சமம்.
Example
rem உடன் எழுத்துரு அளவுகளை அமைக்கவும்:
html {
font-size: 16px; /* ரூட் எழுத்துரு அளவை அமைக்கவும் */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}Px vs Em vs Rem Comparison
Pixels (px)
h1 { font-size: 40px; }
h2 { font-size: 30px; }
p { font-size: 16px; }• நிலையான அலகு
• பயனர் சரிசெய்ய முடியாது
• பதிலளிக்கும் வடிவமைப்புக்கு குறைவான உகந்தது
Em (em)
body { font-size: 16px; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { font-size: 1em; }• பெற்றோர் உறுப்புடன் தொடர்புடையது
• பதிலளிக்கும் வடிவமைப்புக்கு நல்லது
• கூடுதல் கூட்டு சிக்கல்கள்
Root Em (rem)
html { font-size: 16px; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
p { font-size: 1rem; }• ரூட் உறுப்புடன் தொடர்புடையது
• பதிலளிக்கும் வடிவமைப்புக்கு சிறந்தது
• கூட்டு சிக்கல்கள் இல்லை