px-ஐ vw ஆக மாற்றுதல் Pixels ↔ Viewport width இலவசம் ஆன்லைன் பாதுகாப்பு
px-இல் ஒரு மதிப்பை எழுதுங்கள், அதே இடத்தில் vw ஆகப் படித்துக்கொள்ளுங்கள். கணக்கு உங்கள் உலாவியிலேயே நடக்கிறது, எங்கும் எதுவும் அனுப்பப்படுவதில்லை, விடை எதைச் சார்ந்தது என்பது ஊகிக்கப்படாமல் கீழே எழுதப்பட்டுள்ளது.
எதுவும் பதிவேற்றப்படுவதில்லை
வழக்கமான அளவுகள் — px-ஐ vw ஆக மாற்றுதல்
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
இந்த அலகுகள் எங்கிருந்து வந்தன
CSS-இல் உள்ள படவணு உங்கள் திரையின் படவணு அல்ல. திரைகளின் அடர்த்தியை முன்கூட்டி ஊகிக்க முடியாமல் போனபோது, உண்மையான படவணுக்களில் அளக்கப்பட்ட பக்கம், திரைகள் கூர்மையாக ஆக ஆகச் சுருங்கும் பக்கமாக ஆயிற்று; எனவே CSS படவணு ஒரு குறிப்பு நீளமாக மறுவரையறை செய்யப்பட்டது: வசதியான வாசிப்புத் தொலைவில் பார்க்கும்போது, ஓர் அங்குலத்தின் தொண்ணூற்றாறில் ஒரு பங்கு. இந்தப் பக்கத்தின் மற்ற எல்லாம் அதன் மீதே கட்டப்பட்டுள்ளது. em என்பது வலையை விடப் பழையது — ஈய எழுத்துகளில் அது வார்க்கப்பட்ட ஒரு கட்டையின் அகலம்; பெரிய M எழுத்திலிருந்து பெயர் பெற்றது — CSS-இல் அது நடப்பில் உள்ள எழுத்துரு அளவைக் குறிக்கிறது; அதனால்தான் கூறுகளை ஒன்றுக்குள் ஒன்றாக வைக்கும்போது அது மாறுகிறது. rem சேர்க்கப்பட்டதே அதிலிருந்து தப்பிக்கத்தான்: அது வேர்க் கூறின் em; ஒருபோதும் குவிவதில்லை. vw, இடமளிக்கும் வடிவமைப்போடு வந்தது: காட்சிப் பரப்பின் அகலத்தில் நூறில் ஒரு பங்கு, அந்த அகலம் எவ்வளவாக இருந்தாலும்.
இவற்றை எங்கே சந்திப்பீர்கள்
இவை ஒவ்வொரு பாணித் தாளின் அலகுகள். படவணுக்கள் விளிம்புகள், நிழல்கள், மற்றும் அளவு மாறக்கூடாத எல்லாவற்றின் அளவை முடிவு செய்கின்றன; rem எழுத்து, இடைவெளி, அமைப்பு ஆகியவற்றின் அளவை முடிவு செய்கிறது — வேரில் ஒரே மாற்றம் ஒரு முழு இடைமுகத்தின் அளவை மாற்றிவிடும்; em, தன் சொந்த எழுத்தைப் பின்தொடர வேண்டியவற்றின் அளவை முடிவு செய்கிறது, எடுத்துக்காட்டாக ஒரு பொத்தானுக்குள் உள்ள இடம்; vw, எந்தச் சாதனத்திலும் திரையை நிரப்ப வேண்டிய தலைப்புகளுக்கும் தொடக்கப் பகுதிகளுக்கும். இவற்றுக்கு இடையிலான மாற்றமே, படவணுக்களில் கையளிக்கப்பட்ட வடிவமைப்பை, விரியும் ஒரு பாணித் தாளாக மாற்றும் அன்றாடக் கணக்கு.
அடிக்கடி கேட்கப்படும் கேள்விகள்
16 px ஏன் வழக்கமான தொடக்கப் புள்ளி?
ஏனெனில் முக்கிய உலாவிகள் அனைத்திலும் எழுத்தின் இயல்புநிலை அளவு அதுவே; அதை மேலெழுதாத பாணித் தாள் அதையே பெறுகிறது. எனவே இயல்புநிலை அமைப்பில் ஒரு rem என்பது 16 px; பழக்கமான மாற்றங்கள் அதிலிருந்தே வருகின்றன: 0.5 rem என்பது 8 px, 1.5 rem என்பது 24 px. பயனர் உலாவி அமைப்புகளில் இயல்புநிலை அளவைப் பெரிதாக்கியிருந்தால், அதே rem மதிப்புகளும் அதனுடன் வளரும் — அவற்றைப் பயன்படுத்துவதன் நோக்கமே அதுதான்.
rem பயன்படுத்தவா, em பயன்படுத்தவா?
பக்கம் முழுமையாகப் பின்தொடர வேண்டிய எதற்கும் rem — எழுத்து அளவுப் படிநிலை, இடைவெளிகள், அமைப்பு அகலங்கள் — ஏனெனில் அது வேரிலிருந்து அளக்கப்படுகிறது, ஒருபோதும் கூட்டிக்கொள்வதில்லை. தான் அமர்ந்துள்ள எழுத்தைப் பின்தொடர வேண்டிய எதற்கும் em: ஒரு பொத்தானின் உள் இடம், ஒரு சின்னத்துக்கு அருகிலுள்ள இடைவெளி, ஒரு மேற்கோளின் உள்தள்ளல். வழக்கமான தவறு, em-இல் அளவிடப்பட்ட கூறுகளை ஒன்றுக்குள் ஒன்றாக வைப்பது: 1.2 em-க்குள் 1.2 em என்பது 1.44 ஆகிறது, பிறகு 1.73 — இறுதியில் பக்கத்தின் அடியிலுள்ள எழுத்து நினைத்ததைவிட இரு மடங்காகிவிடும்.
விடை துல்லியமானதா?
இரு அலகுகளும் முழு எண்களால் ஒன்றையொன்று வரையறுக்கும் இடத்தில் ஆம் — பக்கம் அதை எண்ணுக்கு மேலே சொல்கிறது, வட்டமிடல் என்பது எத்தனை இலக்கங்கள் காட்டப்படுகின்றன என்பதில் மட்டுமே. விகிதத்துக்கு முடிவுறு தசமம் இல்லாத இடத்தில், பக்கம் பன்னிரண்டு கணிசமான இலக்கங்களைக் காட்டி, தொடர்பு தோராயமானது என்று சொல்கிறது — வேறு மாதிரி நடிப்பதில்லை.
நான் தட்டச்சு செய்வது என் சாதனத்தை விட்டு வெளியேறுகிறதா?
இல்லை. கணக்கு உங்கள் உலாவியிலேயே நடக்கிறது; எதுவும் பதிவேற்றப்படுவதில்லை, பதிவேற்ற ஒரு வழங்கியும் இல்லை. பக்கத்தை ஒருமுறை ஏற்றினால், இணையத்தை அணைத்தாலும் வேலை செய்யும்.
நீங்கள் ஏன் px ஐ vw ஆக மாற்றுகிறீர்கள்
ஒரு வடிவமைப்பாளர் 1440 px அகலத்தில் வரையப்பட்ட ஒரு மாதிரியை அனுப்புகிறார், 96 px முக்கியத் தலைப்பும் 72 px பிரிவு இடைவெளியும் கொண்டு. உண்மை வலையில் பக்கம் தொலைபேசியில் 360 px, டேப்லெட்டில் 820 px, பெரிய திரையில் 2560 px இல் காணப்படும், அவை ஒவ்வொன்றிலும் தலைப்பு திரையுடனான தன் விகிதத்தை வைத்திருக்க வடிவமைப்பாளர் விரும்புவார். அதற்காக உருவாக்கப்பட்ட அலகு பார்வைச்சாளர அகலம், vw, மாதிரியிலிருந்து அங்கே செல்லும் வழி px ஐ vw ஆக மாற்றுவது: நீங்கள் பிக்சல் மதிப்பை எடுத்து, வடிவமைப்பு வரையப்பட்ட அகலத்தால் வகுத்து, நூறால் பெருக்குகிறீர்கள். 1440 px கேன்வாஸில் 96 px தலைப்பு 6.67 vw, அதன்பிறகு திரை எதுவாக இருந்தாலும் அது எப்போதும் அதன் 6.67 சதவீதம்.
அதுவே பார்வைச்சாளர அலகின் வாக்குறுதியும் அதன் அபாயமும். rem உம் em உம் ஓர் எழுத்துரு அளவிலிருந்து தொடங்குகின்றன, அதை உலாவி ஒரு விவேகமான இயல்புக்கு அமைக்கிறது. vw க்கு இயல்பே இல்லை: பார்வைச்சாளர அகலம் வாசகரின் சாளரம் எவ்வளவு அகலமோ அவ்வளவே, அவர்கள் தொலைபேசியைச் சுழற்றும்போது அல்லது சாளரத்தை இழுக்கும்போது மாறுகிறது. எனவே மாற்றி விடை சார்ந்திருக்கும் ஒற்றை எண்ணை மறைப்பதில்லை. வடிவமைப்பின் அகலம் 1440 px இல் தொடங்கி ஒரு புலத்தில் அமர்கிறது, உங்கள் மாதிரிக்குப் பொருந்த அதை மாற்றலாம்.
கணிதம் உங்கள் உலாவியில் இயங்குகிறது, எதுவும் பதிவேற்றப்படுவதில்லை. கீழே சூத்திரம், மாற்றம் எதை வைத்திருக்கிறது எதை வைத்திருக்க முடியாது, பார்வைச்சாளர அலகுகள் எங்கே உதவுகின்றன எங்கே தீங்கு செய்கின்றன, தூய vw உரை உருவாக்கும் அணுகல்தன்மைச் சிக்கல், அதைச் சரிசெய்யும் clamp உத்தி, ஒரு பிக்சல் மாதிரியை ஒரு நீர்மை நடைத்தாளாக மாற்றும் ஒரு முறை ஆகியவற்றைக் காண்பீர்கள்.
சூத்திரமும் அகலமும்
vw என்பது px வகு அகலம், பெருக்கல் நூறு
சூத்திரம் vw = px ÷ width × 100. 1440 px வடிவமைப்பு அகலத்துடன், 144 px அளவு 10 vw ஆகிறது, 72 px என்பது 5 vw, 24 px என்பது 1.667 vw. எது கருதப்பட்டது என்று நீங்கள் காணும்படி, 144 px = 10 vw (1440 px) போல, பக்கம் முடிவுக்கு அருகில் அகலத்தைக் காட்டுகிறது. ஒரு vw என்பது பார்வைச்சாளர அகலத்தின் நூறில் ஒரு பங்கு, எனவே 1000 px அகலச் சாளரத்தில் 1 vw என்பது 10 px க்குச் சமம்.
1440 எங்கிருந்து வருகிறது
இங்குள்ள 1440 px என்பது வடிவமைப்புகள் பெரும்பாலும் வரையப்படும் ஓர் அகலம், ஒரு பழக்கம், நிலையான அளவு அல்ல. சில குழுக்கள் 1280 இல் வரைகின்றன, பல 1920 இல், கைபேசி வடிவமைப்புகள் 375 அல்லது 390 இல். சரியான விடை இல்லை, உங்கள் வடிவமைப்புக் கோப்பு பயன்படுத்தும் அகலம் மட்டுமே. உங்களுடையதைத் தட்டச்சு செய்யுங்கள்: மாற்றம் நீங்கள் தரும் அகலத்தைப் போலவே மட்டுமே நன்றாக இருக்கும்.
வடிவமைப்பின் சொந்த அகலத்தைப் பயன்படுத்துதல்
மாதிரி 1920 px இல் வரையப்பட்டிருந்தால், 1920 ஐத் தட்டச்சு செய்யுங்கள், அதே 96 px தலைப்பு 5 vw ஆகிறது. தவறான அகலத்தைப் பயன்படுத்தி px ஐ vw ஆக மாற்றினால், பக்கம் ஒரு திரை அளவில் சரியாகவும் மற்ற எல்லாவற்றிலும் தவறாகவும் தெரியும், பார்க்க வேண்டும் என்று தெரியாதபோது அது ஒரு புதிரான பிழை.
மாற்றம் எதை வைத்திருக்கிறது, எதை வைத்திருக்க முடியாது
அது திரையின் பங்கை வைத்திருக்கிறது
ஒரு vw என்பது பார்வைச்சாளர அகலத்தின் நூறில் ஒரு பங்கு, எனவே vw இல் எழுதப்பட்ட அளவு இருந்த இடத்தில் நிற்பதற்குப் பதிலாகச் சாளரத்துடன் வளர்ந்து சுருங்குகிறது. முடிவு உங்கள் மாதிரியில் பிக்சல் மதிப்பு ஆக்கிரமித்த திரையின் பங்கு, உலாவியில் உறுப்பு ஒவ்வோர் அகலத்திலும் அந்தப் பங்கை வைத்திருக்கிறது.
அது ஓர் இயல்பைத் தர முடியாது
rem போலன்றி, vw க்கு இயல்பு இல்லை. யாரும் வேறாகச் சொல்லாதபோது உலாவி வேர் எழுத்துரு அளவுக்கு 16 px ஐத் தருகிறது, எனவே ஒரு rem பக்கம் ஓர் உண்மை எண்ணிலிருந்து தொடங்கலாம்; பார்வைச்சாளர அகலம் வாசகரின் சாளரம் எவ்வளவு அகலமோ அவ்வளவே, அவர்கள் தொலைபேசியைத் திருப்பும்போது மாறுகிறது. புலத்திலுள்ள அகலம் உங்கள் வடிவமைப்பின் அகலம், விடை அந்த அகலத் திரைக்குச் சரி, மற்ற இடங்களில் விகிதத்தில்.
சுற்றுதல்
1440 ஆல் வகுத்தல் பெரும்பாலான அளவுகளுக்கு நீண்ட தசமங்களை உருவாக்குகிறது. 6.6667 vw போன்ற மதிப்பு ஒரு நடைத்தாளில் சரி, ஆனால் காணக்கூடிய மாற்றம் இல்லாமல் 6.67 அல்லது 6.7 க்குச் சுற்றலாம். புள்ளிக்குப் பிறகு இரண்டு அல்லது மூன்று இலக்கங்களை வைத்திருங்கள்; அதிகம் இரைச்சல்.
பார்வைச்சாளர அலகுகள் எங்கே உதவுகின்றன
முக்கியத் தலைப்புகளும் பெரிய காட்சி எழுத்தும்
ஒவ்வொரு சாதனத்திலும் திரையின் ஒரு குறிப்பிட்ட பங்கை நிரப்ப வேண்டிய ஒரு தலைப்பு உன்னதப் பயன்பாடு. ஒரு தொலைபேசியின் அகலத்தில் நிலையான 96 px தலைப்பு நிரம்பி வழியும்; vw இல் அது திரையுடன் சுருங்கி ஒரே வரியில் நிற்கிறது.
முழு விளிம்புப் பிரிவுகள்
ஒரு தரையிறங்கும் பக்கத்தின் பெரிய பிரிவுகளுக்கு இடையிலான இடைவெளி திரையுடன் அளவிடும்போது பெரும்பாலும் சிறப்பாகத் தெரிகிறது, அதனால் பக்கம் ஒரு சிறு மடிக்கணினியிலும் ஒரு அகலக் காட்சியிலும் தன் தாளத்தை வைத்திருக்கிறது. vw இல் இடைவெளிகள் அதைச் செய்கின்றன.
தன் வடிவத்தை வைத்திருக்க வேண்டிய கலை
vw இல் அளவிடப்பட்ட முக்கியப் படங்கள், விளக்கப்படங்கள், அலங்கார வடிவங்கள் சாளரத்துடனான தங்கள் விகிதங்களை வைத்திருக்கின்றன, எனவே திரை மாறும்போது அமைப்பு சிதைவதில்லை.
வரம்புகளுடன் நீர்மை எழுத்து
clamp() உடன் சேர்க்கப்படும்போது, vw ஒரு குறைந்தபட்சத்துக்கும் அதிகபட்சத்துக்கும் இடையே மென்மையாக வளரும் எழுத்தைத் தருகிறது. நவீன நடைத்தாள்கள் தலைப்புகளுக்குப் பயன்படுத்தும் உத்தி இது, கீழே விளக்கப்படுகிறது.
பார்வைச்சாளர அலகுகள் எங்கே தீங்கு செய்கின்றன
தூய vw இல் உடல் உரை
vw இல் மட்டுமே அளவிடப்பட்ட உரை வாசகர் உலாவியில் பக்கத்தைப் பெரிதாக்கும்போது பதிலளிப்பதில்லை, ஏனெனில் பெரிதாக்குதல் சாளரத்தின் பிக்சல் அளவை மாற்றுகிறது ஆனால் vw அளவு அதன் பங்கை வைத்திருக்கிறது. பெரிதாக்குதலைச் சார்ந்திருப்பவர்கள், பெரும்பாலும் மோசமான கண்பார்வையால், அவர்கள் பெரிதாக்க முடியாத உரையுடன் விடப்படுகிறார்கள். அணுகல்தன்மை வழிகாட்டுதல்கள் உரையை மறுஅளவிட முடிய வேண்டும் எனக் கேட்கின்றன, தூய vw அளவு அந்தச் சோதனையில் தோற்கிறது.
சிறிய, மிகப் பெரிய உச்சங்கள்
320 px அகலத்தில் 6.67 vw தலைப்பு 21 px, அது மிகச் சிறியதாக இருக்கலாம். 2560 px அகலத்தில் அது 171 px, அது பிரம்மாண்டம். வரம்புகள் இல்லாமல், 1440 இல் சரியாகத் தெரிந்த விகிதம் ஓரங்களில் அபத்தமாக இருக்கலாம்.
உருள் பட்டை
டெஸ்க்டாப் உலாவிகளில், vw க்குப் பயன்படுத்தப்படும் பார்வைச்சாளர அகலம் செங்குத்து உருள் பட்டையின் அகலத்தை உள்ளடக்குகிறது. எனவே 100vw க்கு அமைக்கப்பட்ட ஒரு பெட்டி பக்கம் உருளும்போது தெரியும் பகுதியைவிடச் சற்று அகலமாக இருக்கும், ஒரு கிடைமட்ட உருள் பட்டை தோன்றலாம். vw இலிருந்து ஒரு முழு அகல அமைப்பைக் கட்டும் முன் இதை அறியுங்கள்.
clamp உத்தி
ஒரு தளத்தையும் ஒரு கூரையையும் அமைத்தல்
CSS செயல்பாடு clamp(min, preferred, max) ஒரு குறைந்தபட்சம், ஒரு விருப்ப மதிப்பு, ஓர் அதிகபட்சத்தை எடுக்கிறது. எழுத்துக்கு, குறைந்தபட்சத்தையும் அதிகபட்சத்தையும் rem இலும், விருப்ப மதிப்பை vw கூட்டல் ஒரு rem உறுப்பிலும் எழுதுங்கள்: font-size: clamp(2rem, 1rem + 4vw, 6rem). அளவு சாளரத்துடன் 32 க்கும் 96 px க்கும் இடையே வளர்கிறது, இரு முனைகளையும் ஒருபோதும் தாண்டுவதில்லை. அதன் ஒரு பகுதி rem இல் இருப்பதால், உரை இன்னும் வாசகரின் அமைப்புகளை மதிக்கிறது.
நடு உறுப்பைக் கட்டுவது எப்படி
இரு திரை அகலங்களையும் ஒவ்வொன்றிலும் நீங்கள் விரும்பும் அளவுகளையும் தேர்ந்தெடுங்கள். எடுத்துக்காட்டாக 360 px அகலத்தில் 32 px, 1440 px அகலத்தில் 96 px. சரிவு (96 − 32) ÷ (1440 − 360) = 0.0593 px ஒரு அகல px க்கு, அது 5.93 vw, இடைவெட்டு 32 − 0.0593 × 360 = 10.67 px, ஏறக்குறைய 0.667 rem. எனவே விருப்ப உறுப்பு 0.667rem + 5.93vw. vw பகுதிக்கு மாற்றி உதவுகிறது, ஒரு நிமிடக் கணிதம் மீதியைச் செய்கிறது.
இது ஏன் சரியான சமநிலை
clamp உடன், வடிவமைப்பாளர்கள் விரும்பும் நீர்மை நடத்தையையும் வாசகர்கள் தேவைப்படும் அணுகல்தன்மையையும் பெறுகிறீர்கள். மேலே விவரிக்கப்பட்ட சிக்கலுக்கான விடை இது, பெரும்பாலான நவீன நடைத்தாள்கள் vw ஐ clamp க்குள் மட்டுமே பயன்படுத்துவதற்கான காரணமும் இதுவே.
இங்கே px ஐ vw ஆக மாற்றுவது எப்படி
பிக்சல் மதிப்பைத் தட்டச்சு செய்யுங்கள்
முதல் புலத்தில் பிக்சல்களில் அளவை உள்ளிடுங்கள். தசமங்கள் ஏற்கப்படுகின்றன.
வடிவமைப்பின் அகலத்தை அமையுங்கள்
அது உங்கள் மாதிரியின் அகலமானால் 1440 இல் விடுங்கள். இல்லையென்றால் மாற்றுங்கள். நீங்கள் தட்டச்சு செய்யும்போது முடிவு புதுப்பிக்கப்படுகிறது.
vw மதிப்பை நகலெடுங்கள்
font-size: 6.67vw போல, எண்ணை அதன் அலகுடன் உங்கள் CSS இல் பயன்படுத்துங்கள். உரைக்கு, rem இல் வரம்புகளுடன் சேர்த்து அதை clamp() க்குள் இடுங்கள்.
இந்த அலகுகள் எங்கிருந்து வருகின்றன
CSS பிக்சல்
காட்சிகள் முன்கணிக்கக்கூடிய அடர்த்தியைக் கொண்டிருப்பதை நிறுத்தியபோது, உண்மைப் பிக்சல்களில் அளக்கப்பட்ட ஒரு பக்கம் திரைகள் கூர்மையாகும்போது சுருங்கும் ஒரு பக்கமாகியது. எனவே CSS பிக்சல் ஒரு குறிப்பு நீளமாக மறுவரையறுக்கப்பட்டது: ஒரு வசதியான வாசிப்புத் தொலைவில் காணப்படும் ஓர் அங்குலத்தின் ஏறக்குறைய 1/96. உங்கள் மாதிரி வரையப்படும் அலகு அது.
பார்வைச்சாளர அலகுகள்
vw பதிலளிக்கும் வடிவமைப்புடன் வந்தது: பார்வைச்சாளரத்தின் அகலத்தின் நூறில் ஒரு பங்கு, அது எதுவாக இருந்தாலும். அது வேர் எழுத்துரு அளவுக்குச் சார்பான rem, உறுப்புக்குச் சார்பான em உடன் இணைந்து அமர்கிறது. திரைக்குப் பதிலாக உரைக்குச் சார்பான அளவுகள் உங்களுக்கு வேண்டுமென்றால், px ஐ rem ஆக மாற்றுங்கள்.
px ஐ vw ஆக மாற்றும்போது பொறிகள்
தவறான வடிவமைப்பு அகலத்தைப் பயன்படுத்துதல்
மிகப் பொதுவான பிழை. உங்கள் மாதிரி 1920 அகலமாக இருந்து நீங்கள் 1440 உடன் மாற்றினால், ஒவ்வோர் அளவும் மூன்றில் ஒரு பங்கு தவறாகும். உங்கள் வடிவமைப்புக் கருவியில் சட்டத்தின் அகலத்தை உறுதிப்படுத்துங்கள்.
கைபேசி வடிவமைப்பை மறத்தல்
பல குழுக்களுக்கு இரு மாதிரிகள் உள்ளன, ஒன்று டெஸ்க்டாப்புக்கும் ஒன்று தொலைபேசிக்கும். முதலாவதில் 96 px உம் இரண்டாவதில் 40 px உம் ஆன ஒரு தலைப்பு ஒரே vw மதிப்பு அல்ல. இரு அகலங்கள், இரு மாற்றங்கள், அவற்றை இணைக்க ஒரு clamp ஐப் பயன்படுத்துங்கள்.
முழுப் பக்கத்தையும் vw இல் இடுதல்
எல்லாம் சாளரத்துடன் அளவிடும் ஒரு பக்கம் தன் வாசிப்பு உணர்வை இழக்கிறது: அகலத் திரைகளில் வரிகள் மிக நீளமாகவும் குறுகியவற்றில் உரை மிகச் சிறியதாகவும் ஆகின்றன. அளவிட வேண்டிய சில விஷயங்களுக்கு vw ஐயும், மீதிக்கு நிலையான அல்லது rem அளவுகளையும் பயன்படுத்துங்கள்.
பெரிதாக்கல் சிக்கலைப் புறக்கணித்தல்
உலாவி 200 சதவீதத்துக்குப் பெரிதாக்கப்பட்ட நிலையில் உங்கள் பக்கத்தைச் சோதியுங்கள். உரை வளரவில்லை என்றால், அளவுகளுக்கு ஒரு rem உறுப்பு தேவை.
மாற்றும் முன் மக்கள் கேட்கும் கேள்விகள்
100 px என்பது எத்தனை vw?
1440 px வடிவமைப்பு அகலத்தில், ஏறக்குறைய 6.94 vw.
பயன்படுத்த சிறந்த வடிவமைப்பு அகலம் என்ன?
உங்கள் மாதிரி வரையப்பட்ட ஒன்று. உலகளாவிய இயல்பு இல்லை.
vw, rem ஐவிடச் சிறந்ததா?
அவை வெவ்வேறு வேலைகளைச் செய்கின்றன. rem வாசகரின் உரை அளவைப் பின்பற்றுகிறது; vw சாளரத்தைப் பின்பற்றுகிறது. ஒவ்வொன்றையும் அது எதில் சிறந்ததோ அதற்குப் பயன்படுத்துங்கள்.
நான் எழுத்துரு அளவுக்கு vw ஐப் பயன்படுத்தலாமா?
ஆம், ஆனால் உரை படிக்கத்தக்கதாகவும் இன்னும் பெரிதாக்கத்தக்கதாகவும் இருக்க rem இல் வரம்புகளுடன் அதை clamp() க்குள் இடுங்கள்.
என் எண் பதிவேற்றப்படுகிறதா?
இல்லை. கணிதம் உங்கள் உலாவியில் இயங்குகிறது, எதுவும் எங்கும் அனுப்பப்படுவதில்லை.
நான் எப்படித் திரும்பிச் செல்வது?
வகுப்பதற்குப் பதிலாக அகலத்தால் பெருக்கும் vw இலிருந்து px க்கு உடன்.
px ஐ vw ஆக மாற்றும்போது புத்திசாலித்தனமாகத் தேர்ந்தெடுத்தல்
திரையுடன் எது அளவிட வேண்டும் என்று தீர்மானியுங்கள்
முக்கிய எழுத்து, பெரிய இடைவெளிகள், கலை: ஆம். உடல் உரை, எல்லைகள், சிறு கட்டுப்பாடுகள்: இல்லை. உங்கள் vw மதிப்புகளின் பட்டியல் குறுகியதாக இருந்தால், பக்கம் அவ்வளவு உறுதியாக இருக்கும்.
வடிவமைப்புக் கட்டத்தில் மாற்றுங்கள்
மாதிரியைப் படிக்கும்போதே px ஐ vw ஆக மாற்றினால், எந்த மதிப்புகள் ஒற்றைப்படையாக வருகின்றன என்று உடனே பார்த்து, வடிவமைப்பாளரிடம் நேர்த்தியானவற்றைக் கேட்கலாம். 6.6667 vw ஆக வெளிவரும் ஒரு தலைப்பு அதை 6.5 அல்லது 7 ஆக்குவது பற்றிய உரையாடலை அழைக்கிறது.
அகலத்தின் ஒரு பதிவை வைத்திருங்கள்
பின்னர் மாற்றும் எவரும் அதே அகலத்தைப் பயன்படுத்தும்படி, நடைத்தாளின் மேலே ஒரு கருத்தில் வடிவமைப்பு அகலத்தை எழுதுங்கள். கலந்த அகலங்கள் யாராலும் முழுமையாக விளக்க முடியாத வகையில் ஒருமையற்ற ஒரு பக்கத்தை உருவாக்குகின்றன.
ஒரு மாதிரியிலிருந்து ஒரு நீர்மை நடைத்தாளுக்கு வேலை செய்தல்
அளவிட வேண்டிய அளவுகளைப் பட்டியலிடுங்கள்
வடிவமைப்புக் கோப்பைத் திறந்து திரையைப் பின்தொடர நீங்கள் விரும்பும் ஒவ்வோர் அளவையும் எழுதுங்கள்: முக்கியத் தலைப்பு, பிரிவு இடைவெளிகள், ஒருவேளை ஒரு பெரிய விளக்கப்படம். ஒவ்வொன்றுக்கும், சட்டத்தின் அகலத்துக்கு எதிராக px ஐ vw ஆக மாற்றி, முடிவைக் குறித்துக்கொள்ளுங்கள். பெரும்பாலான பக்கங்கள் பத்துக்கும் குறைவான அத்தகைய மதிப்புகளுடன் முடிகின்றன, மற்ற எல்லாம் rem அல்லது பிக்சல்களில் இருக்கின்றன.
கைபேசிச் சட்டத்தைத் தனியாகச் சரிபாருங்கள்
ஒரு தொலைபேசி மாதிரி இருந்தால், அதன் அகலத்தில் அதே உறுப்புகளைப் படியுங்கள். 1440 px சட்டத்தில் 96 px உம் 375 px சட்டத்தில் 40 px உம் ஆன ஒரு தலைப்பு எந்த ஒற்றை vw மதிப்புக்கும் பொருந்தாது, அது clamp ஐப் பயன்படுத்துவதற்கான சமிக்ஞை: தொலைபேசி அளவு தளமாகிறது, டெஸ்க்டாப் அளவு கூரையாகிறது, vw உறுப்பு இடையில் வேலை செய்கிறது. நீங்கள் ஒவ்வொரு சட்டத்துக்கும் px ஐ vw ஆக மாற்றும்போது, இரு எண்களும் சரிவை வரையறுக்கின்றன.
மூன்று அகலங்களில் மறுஆய்வு செய்யுங்கள்
முடிந்த பக்கத்தை ஏறக்குறைய 360, 820, 1440 பிக்சல்களிலும் ஒருமுறை 2560 இலும் பாருங்கள். நீர்மை அமைப்புகளை மாதிரியின் அகலத்தில் சரியாகப் பெறுவது எளிது, வேறிடங்களில் நுட்பமாகத் தவறாகும், இந்த அகலங்கள் வழியே ஒரு குறுகிய சுற்று ஒரு பார்வையாளர் காணும் முன் பெரும்பாலான சிக்கல்களைக் கண்டுபிடிக்கிறது.
நீண்ட உரையிலிருந்து அலகை விலக்கி வையுங்கள்
வாசிப்பு உரையின் வரிகள் rem இல் அளவிடப்படுவது சிறந்தது, 60 முதல் 75 எழுத்துகள் என்ற அதிகபட்ச வரி நீளம் தரப்படுகிறது. பார்வைச்சாளர அலகைக் காட்சி எழுத்துக்கும் இடைவெளிக்கும் பயன்படுத்துங்கள், வாசிப்பு உரை நிலையாக இருக்கட்டும்.
தொடர்புடைய மாற்றிகள்
அதே கருவிக் குடும்பம் அருகிலுள்ள மாற்றங்களை உள்ளடக்குகிறது. பிக்சல்களுக்குத் திரும்பச் செல்ல, vw இலிருந்து px க்கு பயன்படுத்துங்கள். வேருக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து rem க்கு மற்றும் rem இலிருந்து px க்கு உள்ளன, உறுப்புக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து em க்கு மற்றும் em இலிருந்து px க்கு. அதே நடைத்தாளின் நிறங்களுக்கு, HEX இலிருந்து RGB க்கு மற்றும் HEX இலிருந்து HSL க்கு குறியீடுகளைக் கையாள்கின்றன.
ஒரு செய்து காட்டிய எடுத்துக்காட்டு
ஒரு தரையிறங்கும் பக்கம் 1440 px இல் வடிவமைக்கப்பட்டுள்ளது, 96 px முக்கியத் தலைப்பும் அதற்கு மேலே 72 px இடைவெளியும் கொண்டு என்று வைத்துக்கொள்ளுங்கள். நீங்கள் 96 ஐத் தட்டச்சு செய்து 6.667 vw எனப் படிக்கிறீர்கள், 72 ஐத் தட்டச்சு செய்து 5 vw எனப் படிக்கிறீர்கள். 1000 px சாளரத்தில் தலைப்பு 66.7 px, இடைவெளி 50 px, விகிதத்தில். ஆனால் 360 px அகலத் தொலைபேசியில் தலைப்பு 24 px ஆக இருக்கும், அது நீங்கள் விரும்புவதைவிடச் சிறியது, எனவே தலைப்பை clamp(2.25rem, 1rem + 5vw, 6rem) என எழுதுகிறீர்கள், 36 px தளமும் 96 px கூரையும் தந்து, அது படிக்கத்தக்கதாகவும் பெரிதாக்கத்தக்கதாகவும் இருக்கிறது. உரை இல்லாத இடைவெளி தூய vw இலேயே இருக்கிறது.
ஒரு சிறு சரிபார்ப்புப் பட்டியல்
மாற்றும் முன்
மாதிரியின் அகலத்தைக் கண்டறியுங்கள். எந்த அளவுகள் அளவிட வேண்டும், எவை கூடாது என்று தீர்மானியுங்கள்.
மாற்றும்போது
பிக்சல் மதிப்பையும் வடிவமைப்பு அகலத்தையும் தட்டச்சு செய்து, vw எண்ணை அதன் அலகுடன் நகலெடுங்கள்.
மாற்றிய பிறகு
சாளரத்தைத் தொலைபேசி அகலத்திலிருந்து அகலத் திரை வரை மறுஅளவிட்டு, பக்கத்தை 200 சதவீதத்துக்குப் பெரிதாக்குங்கள். உச்சங்கள் தவறாகத் தெரியும் இடமெல்லாம் clamp() உடன் வரம்புகளைச் சேருங்கள்.
பொதுவான தவறுகள்
1440 ஒரு நிலையான அளவு என்று கருதுதல்
அது ஒரு பழக்கம் மட்டுமே. உங்கள் சொந்த அகலத்தைப் பயன்படுத்துங்கள்.
உடல் உரையை vw இல் மட்டும் அளவிடுதல்
அதைப் பெரிதாக்க முடியாது. ஒரு rem உறுப்பையும் வரம்புகளையும் சேருங்கள்.
உருள் பட்டையை மறத்தல்
உருளும் டெஸ்க்டாப் பக்கங்களில் தெரியும் பகுதியைவிட 100vw அகலமானது.
உங்கள் எண்கள் உங்கள் சாதனத்திலேயே இருக்கும்
கணக்கீடு உள்ளூரில் நடக்கிறது. உங்கள் மதிப்புகள் உங்கள் சொந்த உலாவியால் பயன்படுத்தப்படுகின்றன, எதுவும் எங்கும் அனுப்பப்படுவதில்லை. பிறகு நீக்க எதுவும் இல்லை, உருவாக்க எந்தக் கணக்கும் இல்லை. px ஐ vw ஆக மாற்றும் எளிய வழி அதுவே.
சுருக்கம்
இங்கே px ஐ vw ஆக மாற்ற, பிக்சல்களில் அளவையும் உங்கள் வடிவமைப்பின் அகலத்தையும் தட்டச்சு செய்து, vw = px ÷ width × 100 என்ற சூத்திரத்தைப் பயன்படுத்தி உடனே முடிவைப் படியுங்கள். அகலம் 1440 px இல் தொடங்குகிறது, வடிவமைப்புகள் பெரும்பாலும் வரையப்படும் ஓர் அகலம், ஆனால் அது ஒரு பழக்கம், நிலையான அளவு அல்ல, எனவே உங்களுடையதைத் தட்டச்சு செய்யுங்கள். மாற்றம் திரையின் பங்கை வைத்திருக்கிறது: ஒரு vw என்பது பார்வைச்சாளர அகலத்தின் நூறில் ஒரு பங்கு, எனவே vw இல் ஓர் அளவு சாளரத்துடன் வளர்ந்து சுருங்குகிறது. rem போலன்றி, vw க்கு இயல்பு இல்லை, ஏனெனில் பார்வைச்சாளரம் வாசகரின் சாளரம் எவ்வளவு அகலமோ அவ்வளவு. உரைக்கு, அது படிக்கத்தக்கதாகவும் பெரிதாக்கத்தக்கதாகவும் இருக்க, clamp() க்குள் vw ஐ rem உடன் இணையுங்கள். எதுவும் பதிவேற்றப்படுவதில்லை.