PX to EM Converter
ஒரு இயல்புநிலை எழுத்துரு அளவை அமைக்கவும் (பொதுவாக 16px)
பின்னர், இயல்புநிலை அளவின் அடிப்படையில் ஒரு பிக்சல் மதிப்பை em க்கு மாற்றவும்
அல்லது, இயல்புநிலை அளவின் அடிப்படையில் ஒரு em மதிப்பை பிக்சல்களாக மாற்றவும்
Result:
Body Font Size
கீழே உள்ள அட்டவணையில், "px to em and percent" மாற்ற அட்டவணையைக் காண்பிக்க பிக்சல்களில் (px) ஒரு உடல் எழுத்துரு அளவைத் தேர்ந்தெடுக்கவும்.
உதவிக்குறிப்பு:
இயல்புநிலை எழுத்துரு அளவு பொதுவாக 16px ஆகும்.
| px | em | percent |
|---|---|---|
| 5px | 0.3125em | 31.25% |
| 6px | 0.3750em | 37.50% |
| 7px | 0.4375em | 43.75% |
| 8px | 0.5000em | 50.00% |
| 9px | 0.5625em | 56.25% |
| 10px | 0.6250em | 62.50% |
| 11px | 0.6875em | 68.75% |
| 12px | 0.7500em | 75.00% |
| 13px | 0.8125em | 81.25% |
| 14px | 0.8750em | 87.50% |
| 15px | 0.9375em | 93.75% |
| 16px | 1.0000em | 100.00% |
| 17px | 1.0625em | 106.25% |
| 18px | 1.1250em | 112.50% |
| 19px | 1.1875em | 118.75% |
| 20px | 1.2500em | 125.00% |
| 21px | 1.3125em | 131.25% |
| 22px | 1.3750em | 137.50% |
| 23px | 1.4375em | 143.75% |
| 24px | 1.5000em | 150.00% |
| 25px | 1.5625em | 156.25% |
What is the difference between PX, EM and Percent?
பிக்சல் என்பது ஒரு நிலையான அளவீடு, அதேசமயம் சதவீதம் மற்றும் EM ஆகியவை உறவின அளவீடுகள். சதவீதம் அதன் பெற்றோர் எழுத்துரு அளவைப் பொறுத்தது. EM தனிமத்தின் தற்போதைய எழுத்துரு அளவுடன் தொடர்புடையது (2em என்பது தற்போதைய எழுத்துரு அளவின் 2 மடங்கு). எனவே, உடலின் எழுத்துரு அளவு 16 பிக்சல்களாக இருந்தால், 150% என்பது 24 பிக்சல்களாக இருக்கும் (1.5 * 16), மற்றும் 2em என்பது 32 பிக்சல்களாக இருக்கும் (16 * 2). கூடுதல் அளவீட்டு அலகுகளுக்கு CSS அலகுகளைப் பார்க்கவும்.
PX (Pixels)
நிலையான அளவீடு
திரை அளவுகளில் மாறாது
அச்சுக்கு ஏற்றது
உதாரணம்: 16px
EM
உறவின அளவீடு
பெற்றோர் உறுப்புடன் தொடர்புடையது
பதிலளிக்கும் வடிவமைப்புக்கு ஏற்றது
உதாரணம்: 1.5em
Percent
உறவின அளவீடு
பெற்றோர் உறுப்புடன் தொடர்புடையது
பதிலளிக்கும் வடிவமைப்புக்கு ஏற்றது
உதாரணம்: 150%
Calculation Example
/* Base font size: 16px */
body {
font-size: 16px;
}
/* Calculations: */
/* 150% = 16 * 1.5 = 24px */
/* 2em = 16 * 2 = 32px */
h1 {
font-size: 150%; /* 24px */
}
h2 {
font-size: 2em; /* 32px */
}