மூல உறுப்பின் எழுத்துரு அளவு, தாய் உறுப்பின் எழுத்துரு அளவு மற்றும் DPI மூலம் px ஐ rem, em, pt, பைக்கா, அங்குலம், mm ஆக மாற்றுங்கள். CSS இல் 1 in = 96 px = 72 pt என நிர்ணயிக்கப்பட்டுள்ளது.
எழுதியவர்: Adminசெயற்கை நுண்ணறிவு எழுத்துக் கருவிகளால் வரைவு உருவாக்கப்பட்டதுபுதுப்பிக்கப்பட்டது சரிபார்க்கப்பட்ட எடுத்துக்காட்டுகள்: 7
மூல எழுத்தளவு 16 px, ஓர் இன்ச்சிற்கு 96 பிக்சல்கள் எனில் 24px என்பது 1.5rem.
| அலகு | மதிப்பு | வரையறை |
|---|---|---|
| பிக்சல்கள் (px) | 24px | 1 px |
| புள்ளிகள் (pt) | 18pt | 1 pt = 1/72 in |
| பைகாக்கள் (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| அங்குலம் (in) | 0.25in | 1 in = DPI px |
| சென்டிமீட்டர் (cm) | 0.635cm | 1 cm = 1/2.54 in |
| மில்லிமீட்டர் (mm) | 6.35mm | 1 mm = 1/25.4 in |
| கால் மில்லிமீட்டர்கள் (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (பெற்றோர் உறுப்பின் எழுத்தளவு) | 1.5em | 1 em = பெற்றோர் உறுப்பின் எழுத்தளவு |
| rem (மூல உறுப்பின் எழுத்தளவு) | 1.5rem | 1 rem = மூல உறுப்பின் எழுத்தளவு |
| பெற்றோர் உறுப்பின் எழுத்தளவில் சதவீதம் (%) | 150% | 100% = பெற்றோர் உறுப்பின் எழுத்தளவு |
1 px
1 rem = மூல உறுப்பின் எழுத்தளவு
CSS நீளங்களைப் பிக்சல்கள் வழியாக மாற்றலாம். நிலையான அலகுகளின் உறவு 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q என்பது கால் மில்லிமீட்டர். எழுத்தளவு சார்ந்த அலகுகள் பக்கத்தைச் சாரும்: 1 rem என்பது மூல உறுப்பின் எழுத்தளவு; font-size அமைக்கும்போது 1 em அல்லது 100% என்பது பெற்றோர் உறுப்பின் எழுத்தளவு. மாற்றி முதலில் பிக்சல்களைக் கணக்கிட்டு, பிறகு இலக்கு அலகின் ஒரு அலகிலுள்ள பிக்சல்களால் வகுக்கிறது.
வடிவமைப்பின் பிக்சல் அளவுகளை rem ஆக மாற்ற முன்பக்க நிரலாளர்கள் இதைப் பயன்படுத்தலாம். இயல்புநிலையான 16 px மூல எழுத்தளவில் 24 px என்பது 1.5 rem; வாசகரின் உலாவி எழுத்தளவு விருப்பத்துடன் உரை மாற உதவும். அச்சுப் பணிக்கு ஓர் இன்ச்சிற்கான பிக்சல்கள் புலத்தைப் பயன்படுத்தலாம்: 300 DPI-இல் 10 mm சின்னத்துக்குச் சுமார் 118 பிக்சல்கள் தேவை. வாசகரின் விருப்பத்தைப் பின்பற்ற மூல எழுத்தளவும் அந்த விருப்பத்தை மதிக்க வேண்டும்.
CSS இன்ச் திரையில் அளந்த இன்ச்சுடன் பொருந்த வேண்டியதில்லை. CSS இன்ச்சுக்கு 96 px என வரையறுக்கிறது; குறிப்பு பிக்சலின் பார்வைக் கோணம் சுமார் 0.0213°. செயலாக்கம் நிலையான அலகுகளை இயற்பியல் அளவீடுகளுடனோ பிக்சல்களுடனோ இணைக்கலாம். சாதன இணைப்பு, பார்வைத் தூரம், அச்சு அளவுமாற்றம் ஆகியவை அளவுகோலுடன் பொருந்துமா என்பதைப் பாதிக்கும்.
சூத்திரத்தில் xₛ மற்றும் xₜ தொடக்க மற்றும் இலக்கு மதிப்புகள். pₛ மற்றும் pₜ அந்தந்த அலகின் ஒரு அலகிலுள்ள பிக்சல்கள். நீங்கள் உள்ளிட்ட எழுத்தளவுகளும் பிக்சல் அடர்த்தியும் இந்தக் காரணிகளை நிர்ணயிக்கின்றன.
மதிப்பு, தொடக்க அலகு மற்றும் விடை அலகைத் தேர்ந்தெடுங்கள். rem-க்கு மூல உறுப்பின் எழுத்தளவும், em மற்றும் சதவீதத்துக்கு பெற்றோர் உறுப்பின் எழுத்தளவும் தேவை. இயல்புநிலையான 16 px மூல அளவில் 24 px = 1.5 rem. மூல அளவை 20 px ஆக மாற்றினால் அதே 24 px என்பது 1.2 rem. ஆகவே rem எண்ணைச் சூழலிலிருந்து பிரித்து ஒரு நிரந்தர பிக்சல் மதிப்பாகக் கருத வேண்டாம்.
CSS-இன் நிலையான உறவு 1 in = 96 px = 72 pt = 6 pc = 2.54 cm. எனவே 12 pt = 16 px; ஒரு பிக்சல் 0.75 புள்ளி. ஒரு Q என்பது கால் மில்லிமீட்டர். இந்த அலகுகளில் பரிமாற்ற விகிதம் நிரந்தரமாக இருந்தாலும், திரையில் அவற்றை அளவுகோலால் அளந்த அதே இயற்பியல் நீளமாகக் கருத முடியாது.
| மதிப்பு | தொடக்க அலகு | இலக்கு அலகு | சூழல் | மாற்றிய மதிப்பு |
|---|---|---|---|---|
| 24 | px | rem | மூல எழுத்தளவு 16 px | 1.5 |
| 24 | px | rem | மூல எழுத்தளவு 20 px | 1.2 |
| 12 | pt | px | 96 பிக்சல்/in | 16 |
| 1 | pc | pt | 96 பிக்சல்/in | 12 |
| 100 | % | em | பெற்றோர் எழுத்தளவு 16 px | 1 |
| 10 | mm | px | 300 பிக்சல்/in | 118.110236 |
font-size-இல் பயன்படுத்தும் em மற்றும் சதவீதம் பெற்றோர் எழுத்தளவைச் சாரும்; பிற பண்புகளில் em தற்போதைய உறுப்பின் எழுத்தளவைச் சாரலாம். இந்தப் படிவத்தில் உள்ள பெற்றோர் எழுத்தளவுப் புலம் எந்தச் சூழலைக் குறிக்கிறது என்பதைப் பார்த்து மதிப்பிடுங்கள். அடுக்கடுக்காக em பயன்படுத்தினால் அளவு பெருகலாம்: 1.2 × 1.2 = 1.44. rem மூல உறுப்பைச் சார்வதால் அத்தகைய அடுக்குப் பெருக்கம் ஏற்படாது.
ஓர் இன்ச்சிற்கான பிக்சல்கள் புலத்தை 96 ஆக வைத்தால் வழக்கமான CSS உறவு கிடைக்கும். 300 போன்ற அச்சு அடர்த்தியை உள்ளிட்டால், கிடைக்கும் px உண்மையான பிக்சல் எண்ணுக்கானது; அது CSS px உறவை மாற்றும் உலாவி விதி அல்ல. உதாரணமாக 10 mm × 300 / 25.4 = 118.110236… பிக்சல்கள். படத்தைச் சரியான இயற்பியல் அளவில் அச்சிடுவதற்கு அச்சுப்பொறி மற்றும் ஆவண அமைப்புகளும் சரியாக இருக்க வேண்டும்.
வாசகரின் இயல்பு எழுத்தளவு விருப்பத்துக்கு உரை ஏற்ப மாற rem உதவும். பக்கப் பெரிதாக்கம் px மற்றும் rem இரண்டையும் பாதிக்கலாம். எண்ணை மாற்றியதாலேயே பக்கத்தின் அணுகல்தன்மை உறுதியாகாது; உரையைப் பெரிதாக்கும்போது உள்ளடக்கமும் செயல்பாடும் காட்சியில் இருப்பதைச் சரிபாருங்கள். உங்களின் உண்மையான பக்கத்தில் பயன்படுத்தும் எழுத்தளவை இங்கு உள்ளிடுவது பொருத்தமான ஒப்பீட்டைத் தரும்.
அலகு உறவுகளுக்கு W3C CSS Values and Units ஆவணம் ஆதாரம். இயற்பியல் நீளங்களுக்கு நீள மாற்றி, பத்தின் அடுக்குகளுக்கு SI முன்னொட்டு மாற்றி உதவும்.
சரிபார்ப்பின் மூலம்: எடுத்துக்காட்டு சரிபார்ப்பு: CSS Values 3 §6.1: 1rem = மூல எழுத்தளவு (உலாவியின் பொதுவான இயல்புநிலை 16 px); 24 / 16 = 1.5
சரிபார்ப்பின் மூலம்: எடுத்துக்காட்டு சரிபார்ப்பு: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
சரிபார்ப்பின் மூலம்: எடுத்துக்காட்டு சரிபார்ப்பு: CSS Values 3 §6.2: 1in = 96px
சரிபார்ப்பின் மூலம்: எடுத்துக்காட்டு சரிபார்ப்பு: 1 rem = மூல எழுத்தளவு (16 px); 1.5 × 16
பொதுவான இயல்புநிலையில் 16 பிக்சல்கள். ஒரு rem என்பது மூல html உறுப்பின் எழுத்தளவு. வாசகர் இயல்பு எழுத்தளவை மாற்றாவிட்டாலும், பாணித்தாளில் html { font-size } அமைக்காவிட்டாலும், பொதுவான உலாவி இயல்புநிலை 16 px. அந்த அடிப்படையில் html { font-size: 62.5% } அமைத்தால் 1 rem = 10 px. W3C CSS Values and Units ஆவணம் rem உறவை வரையறுக்கிறது; 16 px என்பது நிரந்தரத் தரநிலை அல்ல.
பிக்சல்களை 0.75-ஆல் பெருக்குங்கள்; புள்ளிகளைப் பிக்சலாக மாற்ற 4/3 (சுமார் 1.333)-ஆல் பெருக்குங்கள். இவை 1 in = 96 px = 72 pt என்ற W3C CSS உறவிலிருந்து வருகின்றன; எனவே 1 px = 72/96 pt. 16 px உரை என்பது 12 pt; 11 pt உரை சுமார் 14.67 px.
rem எப்போதும் மூல உறுப்பின் எழுத்தளவைச் சாரும். em பொதுவாக தற்போதைய உறுப்பின் எழுத்தளவைச் சாரும்; font-size-இல் பயன்படுத்தும்போது பெற்றோரின் எழுத்தளவைச் சாரும். எனவே அடுக்கடுக்கான 1.2em பட்டியல்களில் அளவு பெருகலாம்: 1.2 × 1.2 = 1.44; இது இரு நிலைகளுக்கும் முந்தைய பொதுவான தொடக்க எழுத்தளவின் மடங்கு. ஆனால் 16 px மூல அளவில் 1.2rem எவ்வளவு ஆழமான அடுக்கிலும் 19.2 px ஆகவே இருக்கும்.
வாசகரின் உலாவி இயல்பு எழுத்தளவு விருப்பத்துக்கு உரை ஏற்ப மாற வேண்டும் என்றால் rem உதவும்; மூல எழுத்தளவும் அந்த விருப்பத்தை மதிக்க வேண்டும். பக்கப் பெரிதாக்கம் px மற்றும் rem இரண்டையும் பெரிதாக்கும்; rem, em, சதவீத அளவுகள் மூல அல்லது பெற்றோர் சூழலின் வழியே எழுத்தளவு விருப்பத்தைப் பின்பற்றலாம். WCAG 2.1-இன் 1.4.4 வெற்றிக் குறிக்கோள் (AA), உள்ளடக்கம் அல்லது செயல்பாடு இழக்காமல் உரையை 200% வரை பெரிதாக்க முடிவதைக் கோருகிறது. உலாவிப் பெரிதாக்கத்துடன் px-லும் இதை நிறைவேற்றலாம்; மூல சூழல் அனுமதித்தால் rem எழுத்தளவு விருப்பத்தையும் மதிக்க உதவும்.
CSS இன்ச் திரையில் அளந்த இன்ச்சுடன் பொருந்த வேண்டியதில்லை. CSS-இல் 1 in சரியாக 96 px. W3C குறிப்பு பிக்சல் என்பது 96 DPI திரையை 28 in தூரத்தில் பார்க்கும்போது அதன் ஒரு பிக்சலின் சுமார் 0.0213° பார்வைக் கோணம். செயலாக்கம் நிலையான நீள அலகுகளை இயற்பியல் அளவீடுகளுடனோ பிக்சல்களுடனோ இணைக்கலாம். சாதன இணைப்பும் பார்வைத் தூரமும் மாறுவதால் தொலைபேசியில் 96 px பெட்டி இயற்பியல் இன்ச்சைவிடச் சிறியதாக இருக்கலாம். அசல் அளவிலான அச்சில் 1 in = 25.4 mm உறவு அளவுகோலுடன் பொருந்தலாம்; அச்சு அளவுமாற்றமும் அளவுத்திருத்தமும் விளைவைப் பாதிக்கும்.
இந்தக் கணிப்பானில் சுயாதீன ஆதாரங்களிலிருந்து பதில்கள் பெறப்பட்ட 7 தீர்க்கப்பட்ட எடுத்துக்காட்டுகள் உள்ளன. இவை சோதனைத் தொகுப்பில் இயங்குகின்றன; இங்கேயும் அவற்றை இயக்கலாம்.