vw-ஐ px ஆக மாற்றுதல் Viewport width ↔ Pixels இலவசம் ஆன்லைன் பாதுகாப்பு

vw ஐ px ஆக ஏன் மாற்றுகிறீர்கள்

ஒரு பாணித்தாள் ஒரு தலைப்பில் font-size: 5.2vw என்றும், ஒரு பிரிவில் margin-top: 8vw என்றும், ஒரு படத்தில் width: 42vw என்றும் சொல்கிறது. அவை நெகிழ்வான மதிப்புகள், திரையில் என்ன இருக்கிறது என்று அவை சொல்வதில்லை. ஒரு தொலைபேசியில் தலைப்பு எவ்வளவு பெரியது? ஒரு மடிக்கணினியில் படம் எவ்வளவு அகலம்? 1920 படப்புள்ளிகளில் விளிம்பு சரியாகத் தெரிகிறதா? அதை அறிய நீங்கள் vw ஐ px ஆக மாற்றுகிறீர்கள்: எண்ணைச் சாளரத்தின் அகலத்தால் பெருக்கி நூறால் வகுத்து, வடிவமைப்பாளர்கள், சோதனையாளர்கள், வாடிக்கையாளர்கள் பயன்படுத்தும் அலகில் விடையை வாசிக்கிறீர்கள். நெகிழ்வுக் குறியீட்டை மறுஆய்வு செய்யும்போது, ஒரு கட்டமைப்பை ஒரு மாதிரி வடிவமைப்புக்கு எதிராகச் சரிபார்க்கும்போது அல்லது குறுகிய திரையில் தலைப்பு ஏன் சிறியதாகத் தெரிகிறது என்று ஒரு சக ஊழியருக்கு விளக்கும்போது நீங்கள் செய்வது அது.

இந்த மாற்றத்தை rem அல்லது em இலிருந்து வேறுபடுத்துவது பெருக்கி சாளரமே என்பது. ஒரு vw என்பது காட்சிப் பகுதி அகலத்தின் நூறில் ஒரு பங்கு, எனவே 5.2vw என்பது 1000 px அகலச் சாளரத்தில் 52 px, 360 px அகலத் தொலைபேசியில் 18.7 px, 1920 அகலமுள்ள ஒரு பெரிய திரையில் 99.8 px. திரும்பச் சார்ந்திருக்க இயல்புநிலை இல்லை, வாசகர் தொலைபேசியைச் சுழற்றும்போது அல்லது சாளரத்தை இழுக்கும்போது அகலம் மாறுகிறது. எனவே மாற்றி அகலத்தைக் கேட்டு, விடையின் அருகே காட்டி, வடிவமைப்புகள் பெரும்பாலும் வரையப்படும் அகலமான 1440 px இல் தொடங்குகிறது.

கணக்கு உங்கள் உலாவியில் நடக்கிறது, எதுவும் பதிவேற்றப்படுவதில்லை. கீழே நீங்கள் சூத்திரம், மாற்றம் எதை வைத்திருக்கிறது எதை வைத்திருக்க முடியாது, பல அகலங்களில் ஒரு நெகிழ்வுப் பாணித்தாளை வாசிப்பது எப்படி, உருள் பட்டையின் பொறி, தூய vw இல் உரையின் அணுகல்தன்மைச் சிக்கல், நெகிழ்வுக் குறியீட்டைப் புரிந்துகொள்ளத்தக்கதாக வைக்கும் சில பழக்கங்களைக் காண்பீர்கள்.

சூத்திரமும் அகலமும்

px என்பது vw ஐ அகலத்தால் பெருக்கி நூறால் வகுத்தது

சூத்திரம் px = vw × width ÷ 100. 1440 px அகலத்தில், 10 vw என்பது 144 px ஆகிறது, 5 vw என்பது 72 px ஆகிறது, 1.667 vw என்பது 24 px ஆகிறது. பக்கம் முடிவின் அருகே அகலத்தை அச்சிடுகிறது, எனவே 10 vw = 144 px (1440 px) போன்ற ஒரு வரி என்ன கருதப்பட்டது என்று சொல்கிறது. வேறொரு திரையைக் காண, அகலத்தை மாற்றி மீண்டும் முடிவை வாசியுங்கள்.

எந்த அகலங்களை முயல வேண்டும்

சரிபார்க்கப் பயனுள்ள ஒரு தொகுப்பு தொலைபேசிகளுக்கு 360 அல்லது 390, நிமிர்ந்த டேப்லெட்டுக்கு 768, ஒரு சிறிய மடிக்கணினிக்கு 1024, ஒரு வழக்கமான மடிக்கணினி அல்லது மேசைக்கணினிக்கு 1440, ஒரு முழு-HD திரைக்கு 1920. ஒவ்வொன்றையும் அகலப் புலத்தில் தட்டச்சு செய்து முடிவைக் குறித்துக்கொள்ளுங்கள். ஐந்து வாசிப்புகள் ஒரு மதிப்பின் முழு வரம்பையும் காட்டுகின்றன, எந்த உச்சமும் வெளிப்படுகிறது.

உண்மையான சாளரத்தின் அகலத்தைப் பயன்படுத்துதல்

உங்கள் உலாவியின் உருவாக்குநர் கருவிகளில், சாதனக் கருவிப்பட்டை சாளரத்தின் அகலத்தைப் படப்புள்ளிகளில் காட்டுகிறது. பக்கம் செய்வதை மாற்றி சொல்வதுடன் ஒப்பிட அந்த எண்ணைப் பயன்படுத்துங்கள். அவை ஒத்துப்போனால், பாணித்தாளின் உங்கள் வாசிப்பு சரி.

மாற்றம் எதை வைத்திருக்கிறது, எதை வைத்திருக்க முடியாது

அது திரையின் பங்கை வைத்திருக்கிறது

ஒரு vw என்பது காட்சிப் பகுதி அகலத்தின் நூறில் ஒரு பங்கு, எனவே vw இல் எழுதப்பட்ட ஓர் அளவு நிலையாக இருப்பதற்குப் பதிலாக சாளரத்துடன் வளர்ந்து சுருங்குகிறது. நீங்கள் பெறும் படப்புள்ளி மதிப்பு ஒரு குறிப்பிட்ட அகலத்துக்கு உறுதியாக்கப்பட்ட அந்தப் பங்கு.

அது ஓர் இயல்புநிலையைத் தர முடியாது

rem போலன்றி, vw க்கு இயல்புநிலை இல்லை. யாரும் வேறு சொல்லாதபோது ஓர் உலாவி வேர் எழுத்துரு அளவை 16 px ஆகத் தருகிறது, எனவே ஒரு rem பக்கம் ஓர் உண்மை எண்ணிலிருந்து தொடங்கலாம்; காட்சிப் பகுதி அகலம் வாசகரின் சாளரம் எவ்வளவு அகலமோ அவ்வளவு, அவர்கள் தொலைபேசியைத் திருப்பும்போது அது மாறுகிறது. இங்குள்ள 1440 px என்பது வடிவமைப்புகள் பெரும்பாலும் வரையப்படும் ஓர் அகலம், ஒரு பழக்கம், தரநிலை அல்ல. உங்கள் சொந்தத்தைத் தட்டச்சு செய்யுங்கள்.

முழுமையாக்கல்

அகலத்தால் பெருக்கி 100 ஆல் வகுப்பது தசமங்களை உருவாக்கலாம். 1440 px இல் 6.67 vw என்பது 96.048 px. உலாவிகள் பின்னப் படப்புள்ளிகளைக் கையாளுகின்றன, ஆனால் ஒரு வடிவமைப்புக் கோப்புக்கு உங்களுக்கு ஒரு முழு எண் தேவைப்பட்டால், முழுமையாக்கி, முழுமையாக்கல் உங்களுடையது என்று குறித்துக்கொள்ளுங்கள்.

ஒரு நெகிழ்வுப் பாணித்தாளை வாசித்தல்

மூன்று அகலங்களை எடுத்து முடிவுகளை எழுதுங்கள்

ஒரு குறுகிய, ஓர் இடைநிலை, ஓர் அகலமான அகலத்தைத் தேர்ந்தெடுங்கள், எடுத்துக்காட்டாக 375, 1024, 1920. பாணித்தாளிலுள்ள ஒவ்வொரு முக்கிய vw மதிப்புக்கும், ஒவ்வோர் அகலத்திலும் vw ஐ px ஆக மாற்றி, மூன்று எண்களையும் ஒரு குறிப்பில் எழுதுங்கள். 5.2 vw கொண்ட ஒரு தலைப்பு 19.5, 53.2, 99.8 படப்புள்ளிகளைத் தருகிறது. இப்படிப் பார்த்தால், தலைப்பு குறுகிய முனையில் வாசிக்கத்தக்கதா, அகலமான முனையில் அதிகமாக இல்லையா என்று அறிவீர்கள்.

clamp ஐத் தேடுங்கள்

நன்கு எழுதப்பட்ட நெகிழ்வுக் குறியீடு clamp(min, preferred, max) உடன் vw ஐச் சுற்றி வரம்புகளை இடுகிறது. நீங்கள் clamp(2rem, 1rem + 4vw, 6rem) ஐக் கண்டால், அளவு 32 க்கும் 96 px க்கும் இடையே வளர்ந்து இரு முனைகளிலும் நிற்கிறது. நீங்கள் vw பகுதியை மாற்றும்போது, அது வரம்பின் நடுப்பகுதி மட்டுமே என்றும், விளிம்புகளில் என்ன நடக்கிறது என்பதை வரம்புகள் தீர்மானிக்கின்றன என்றும் நினைவில் கொள்ளுங்கள்.

உச்சங்களைச் சரிபாருங்கள்

ஆபத்தான அகலங்கள் மிகச் சிறியதும் மிகப் பெரியதும். 320 px இல் 6 vw தலைப்பு 19 px; 2560 இல் அது 154 px. இரண்டில் எதுவும் ஏற்கத்தக்கதாகத் தெரியவில்லை, clamp இல்லையென்றால், பாணித்தாளுக்கு வரம்புகள் தேவை.

vw ஐ px ஆக மாற்றும்போது பொறிகள்

உருள் பட்டை

மேசைக்கணினி உலாவிகளில், vw க்குப் பயன்படுத்தப்படும் காட்சிப் பகுதி அகலம் செங்குத்து உருள் பட்டையின் அகலத்தையும் உள்ளடக்குகிறது. எனவே பக்கம் உருளும்போது 100vw தெரியும் பகுதியைவிடச் சற்று அகலமானது, பல அமைப்புகளில் ஏறத்தாழ 15 முதல் 17 படப்புள்ளிகள். எனவே நீங்கள் கணக்கிடும் படப்புள்ளி மதிப்பு அது குறிப்பதாகத் தோன்றும் தெரியும் அகலத்தைவிடச் சற்றுப் பெரியது. உருள் பட்டைகள் பக்கத்தின் மேல் மேலெழுதும் தொலைபேசிகளில், விளைவு இல்லை.

தவறான அகலத்தைப் பயன்படுத்துதல்

முடிவு நீங்கள் தட்டச்சு செய்யும் அகலத்தைப் போலவே சரியானது. உங்கள் சோதனைச் சாளரம் 1366 px அகலமாகவும் நீங்கள் 1440 இல் மாற்றினால், ஒவ்வொரு மதிப்பும் ஏறத்தாழ ஐந்து சதவீதம் தவறு. உருவாக்குநர் கருவிகளிலிருந்து உண்மை அகலத்தை வாசியுங்கள்.

vw ஐ சதவீதத்துடன் குழப்புதல்

50% என்ற அகலம் பெற்றோரின் அகலத்தைக் குறிக்கிறது, 50vw சாளரத்தைக் குறிக்கிறது. ஒரு குறுகிய கொள்கலனுக்குள் இரண்டும் மிக வேறுபட்டவை. மாற்றி vw விடையைத் தருகிறது; உங்கள் உறுப்பு ஒரு கொள்கலனுக்குள் இருந்தால், பெற்றோர் சாளரத்தைவிடக் குறுகலாக இருக்கலாம்.

vw இல் உரையை அணுகலாக்க முடியாது என்பதை மறத்தல்

vw இல் மட்டுமே அளவிடப்பட்ட உரை வாசகர் பக்கத்தைப் பெரிதாக்கும்போது பதிலளிப்பதில்லை, ஏனெனில் சாளரமும் உரையும் சேர்ந்து அளவிடப்படுகின்றன. உரையை அளவு மாற்ற முடிய வேண்டும் என்று அணுகல்தன்மை வழிகாட்டல்கள் கேட்கின்றன. clamp() இல் உள்ளது போல ஒரு rem உறுப்பைச் சேருங்கள், அதனால் உரை பெரிதாக்கத்துக்கும் பதிலளிக்கிறது.

மாற்றுவதற்கு முன் மக்கள் கேட்கும் கேள்விகள்

1 vw என்பது எத்தனை படப்புள்ளிகள்?

சாளர அகலத்தின் நூறில் ஒரு பங்கு: 1440 இல் 14.4 px, 1000 இல் 10 px, 360 இல் 3.6 px.

50 vw என்பது எத்தனை படப்புள்ளிகள்?

சாளரத்தின் பாதி: 1440 அகலத்தில் 720 px, 1000 அகலத்தில் 500 px.

என் பக்கம் ஏன் திரையைவிட அகலமாக உள்ளது?

உருளும் ஒரு பக்கத்தில் 100vw கொண்ட ஒரு பெட்டி தெரியும் பகுதியைவிட அகலமானது, ஏனெனில் உருள் பட்டை எண்ணப்படுகிறது. அதற்குப் பதிலாக ஒரு கொள்கலனுக்குள் 100% ஐப் பயன்படுத்துங்கள்.

vw என்பது சதவீதத்துக்குச் சமமா?

இல்லை. சதவீதம் பெற்றோரைக் குறிக்கிறது, vw சாளரத்தை.

என் எண் பதிவேற்றப்படுகிறதா?

இல்லை. கணக்கு உங்கள் உலாவியில் ஓடுகிறது, எதுவும் எங்கும் அனுப்பப்படுவதில்லை.

திரும்புவது எப்படி?

பெருக்குவதற்குப் பதிலாக அகலத்தால் வகுக்கும் px ஐ vw ஆக மாற்றுதல் மூலம்.

பொதுவான அகலங்களில் பொதுவான மதிப்புகள்

ஒரு மன அட்டவணை

மாற்றியைப் பயன்படுத்தும் முன் மதிப்பிட சில நங்கூரங்களை அறிவது உதவுகிறது. 1000 px அகலத்தில், 1 vw என்பது 10 px, அது கணக்கை எளிதாக்குகிறது: 2.5 vw என்பது 25 px, 8 vw என்பது 80 px. 1440 px இல், 1 vw என்பது 14.4 px. 375 px இல், 1 vw என்பது 3.75 px, எனவே 8 vw தலைப்பு 30 px. ஒரு விரைவுச் சரிபார்ப்புக்கு vw ஐ px ஆக மாற்றும்போது, இந்த நங்கூரங்களில் ஒன்றிலிருந்து தொடங்கி அளவிடுங்கள்.

மூன்று அகலங்கள், ஒரு பாணித்தாள்

80vw அகலம், 4vw இடைவெளி, 6vw தலைப்பு கொண்ட ஓர் அட்டையை எடுத்துக்கொள்ளுங்கள். 375 px தொலைபேசியில் அவை 300 px, 15 px, 22.5 px ஆகின்றன. 768 px டேப்லெட்டில், 614 px, 30.7 px, 46 px. 1440 px மேசைக்கணினியில், 1152 px, 57.6 px, 86.4 px. மூன்றையும் அருகருகே காண்பது மேசைக்கணினியில் அட்டை மிக அகலம், தலைப்பு மிகப் பெரியது என்றும், நீங்கள் ஒரு அதிகபட்ச அகலத்தையும் ஒரு clamp ஐயும் விரும்பக்கூடும் என்றும் உடனே சொல்கிறது.

காட்சிப் பகுதிக்கு அப்பால்

கொள்கலன் அலகுகள்

புதிய CSS சாளரத்துக்குப் பதிலாக ஒரு கொள்கலனுடன் தொடர்புடைய அலகுகளை வழங்குகிறது, cqw போல, அது கொள்கலனின் அகலத்தின் நூறில் ஒரு பங்கு. ஒரு குறுகிய பக்கப்பட்டையில் வைக்கப்படும் ஒரு கூறு முழுச் சாளரத்தையும் கொண்டது போல நடந்துகொள்ளும் சிக்கலை அவை தீர்க்கின்றன. நீங்கள் அவற்றைப் பயன்படுத்தினால், கணக்கு vw க்கு உள்ளது போலவே, கொள்கலனின் அகலத்தை அடிப்படையாகக் கொண்டு, அந்த அகலத்தைத் தட்டச்சு செய்து இந்த மாற்றியைப் பயன்படுத்தலாம்.

சிறிய, பெரிய, இயங்கு காட்சிப் பகுதிகள்

தொலைபேசிகளில், முகவரிப் பட்டை நழுவி மறையும்போது தெரியும் பகுதி மாறுகிறது. உயரங்களுக்கு, புதிய அலகுகள் svh, lvh, dvh சிறிய, பெரிய, இயங்கு காட்சிப் பகுதியை விவரிக்கின்றன. அகலங்களுக்கு நிலைமை எளிது, ஏனெனில் முகவரிப் பட்டை அதைப் பாதிப்பதில்லை, vw நிலையானது. தொலைபேசிகளில் நெகிழ்வு வடிவமைப்புக்கு vh ஐவிட vw ஏன் பாதுகாப்பான அலகு என்பதற்கு அது இன்னொரு காரணம்.

சதவீதம், vw, கட்டம்

சதவீத அகலங்கள் பெற்றோரைப் பின்தொடர்கின்றன, vw சாளரத்தைப் பின்தொடர்கிறது, CSS கட்டமும் flexbox உம் கிடைக்கும் இடத்தைப் பின்தொடர்கின்றன. பெரும்பாலும் சிறந்த நெகிழ்வு அமைப்புகள் கட்டமைப்புக்குக் கட்டத்தையும் சதவீதங்களையும் வகை, இடைவெளிக்கு மட்டும் vw ஐயும் பயன்படுத்துகின்றன, ஏனெனில் அவையே திரையை நேரடியாகப் பின்தொடர்வதால் பயனடைபவை. ஓர் அமைப்பைச் சரிபார்க்க நீங்கள் vw ஐ px ஆக மாற்றும்போது, ஒரு கட்டப் பாதை அதே விஷயத்தை இன்னும் உறுதியாகச் சொல்லியிருக்குமா என்று கேளுங்கள்.

CSS எழுதாதவர்களுக்கு vw ஐ விளக்குதல்

சாளரத்தை அளவுகோலாகப் பயன்படுத்துங்கள்

ஒரு vw என்பது திரையின் அகலத்தில் ஒரு சதவீதம் என்று நீங்கள் சொன்னவுடன் வாடிக்கையாளர்களும் சக ஊழியர்களும் வழக்கமாகக் கருத்தைப் புரிந்துகொள்கிறார்கள். 5 vw தலைப்பு என்பது திரை அகலத்தில் ஐந்து சதவீதம். பிறகு அவர்களுக்கு இரு எண்களைக் காட்டுங்கள்: அவர்களின் சொந்தத் தொலைபேசியிலும் கூட்ட அறையிலுள்ள பெரிய திரையிலும் அது என்ன ஆகிறது. நீங்கள் இரு அகலங்களுக்கும் vw ஐ px ஆக மாற்றி முடிவுகளை உரக்கச் சொல்லும்போது, திரையுடன் நகரும் ஓர் அளவு என்ற கருத்து உறுதியாகிறது.

வடிவமைப்பு ஏன் நிலையாக இல்லை என்று சொல்லுங்கள்

தொழில்நுட்பமற்ற பங்குதாரர்கள் சில நேரம் பக்கத்துக்குத் தலைப்புக்கு ஏன் ஒரே அளவு இல்லை என்று கேட்கிறார்கள். விடை, மிகச் சிறிய தொலைபேசிக்கும் மிகப் பெரிய திரைக்கும் இடையே திரைகள் ஏழு அல்லது எட்டு மடங்கு வேறுபடுகின்றன, ஒன்றுக்குப் பொருந்தும் ஒரு நிலையான அளவு மற்றதுக்குத் தவறு. நெகிழ்வு அலகுகள்தான் விடை, இந்தப் பக்கத்திலிருந்து படப்புள்ளி எண்கள் திரை ஒரே மதிப்பை எவ்வளவு மாற்றுகிறது என்று காட்டுகின்றன.

இந்த அலகுகள் எங்கிருந்து வருகின்றன

CSS படப்புள்ளி

திரைகள் கணிக்கத்தக்க அடர்த்தியைக் கொண்டிருப்பதை நிறுத்தியபோது, உண்மைப் படப்புள்ளிகளில் அளக்கப்பட்ட ஒரு பக்கம் திரைகள் கூர்மையாகும்போது சுருங்கும் ஒரு பக்கமாகியது. எனவே CSS படப்புள்ளி ஒரு குறிப்பு நீளமாக மறுவரையறை செய்யப்பட்டது: ஒரு வசதியான வாசிப்புத் தொலைவில் பார்க்கும் ஓர் அங்குலத்தின் ஏறத்தாழ 1/96. இந்தப் பக்கம் தன் விடைகளைத் தரும் அலகு அது.

காட்சிப் பகுதி அலகுகள்

vw நெகிழ்வு வடிவமைப்புடன் வந்தது: காட்சிப் பகுதியின் அகலத்தின் நூறில் ஒரு பங்கு, அது எதுவாக இருந்தாலும். அது வேர் எழுத்துரு அளவுடன் தொடர்புடைய rem க்கும் உறுப்புடன் தொடர்புடைய em க்கும் அருகில் அமர்கிறது. அதே படப்புள்ளி மதிப்பு அந்த அலகுகளில் எப்படித் தெரிகிறது என்று காண, rem ஐ px ஆக மாற்றி ஒப்பிடுங்கள்.

நெகிழ்வுக் குறியீட்டைப் புரிந்துகொள்ளத்தக்கதாக வைக்கும் பழக்கங்கள்

படப்புள்ளி மதிப்புகளுக்குக் குறிப்பு இடுங்கள்

font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ போன்ற ஒரு வரி சில சொற்கள் செலவாகிறது, அடுத்த வாசகருக்குப் பல மாற்றங்களைச் சேமிக்கிறது.

வடிவமைப்பு அகலத்தை ஓரிடத்தில் வையுங்கள்

உங்கள் திட்டத்தில் வடிவமைப்பு வரையப்பட்ட அகலத்துக்கு ஒரு தனிப்பயன் பண்பு இருந்தால், ஒவ்வொரு vw மதிப்பையும் அதற்குத் தடமறியலாம். நீங்கள் ஒரு மறுஆய்வுக்கு vw ஐ px ஆக மாற்றும்போது, எந்த அகலத்தைப் பயன்படுத்துவது என்று அறிவீர்கள்.

vw ஐ அளவோடு பயன்படுத்துங்கள்

vw மதிப்புகளின் ஒரு குறுகிய பட்டியல் பகுத்தறிய எளிது. எல்லாமே vw இல் இருக்கும் ஒரு பாணித்தாள் அப்படியல்ல. அதைக் காட்சி வகை, பெரிய இடைவெளிகள், கலைப்படைப்புக்கு வைத்திருங்கள்.

முக்கியமாக இருக்கும்போது உண்மைச் சாதனங்களுடன் சோதியுங்கள்

உலாவிக் கருவிகள் அகலங்களை நன்றாக உருவகப்படுத்துகின்றன, ஆனால் ஓர் உண்மைத் தொலைபேசி முகவரிப் பட்டைகள், சுழற்சி, பெரிதாக்கத்தின் உண்மை நடத்தையைக் காட்டுகிறது. ஒரு சாதனத்தில் ஐந்து நிமிடச் சரிபார்ப்பு ஓர் உருவகம் தவறவிடுவதைப் பிடிக்கிறது.

தொடர்புடைய மாற்றிகள்

அதே குடும்பக் கருவிகள் அண்டை மாற்றங்களை உள்ளடக்குகின்றன. vw க்குத் திரும்ப, px ஐ vw ஆக மாற்றுதல் ஐப் பயன்படுத்துங்கள். வேருடன் தொடர்புடைய அளவுகளுக்கு, px ஐ rem ஆக மாற்றுதல், rem ஐ px ஆக மாற்றுதல் உள்ளன, உறுப்புடன் தொடர்புடைய அளவுகளுக்கு, px ஐ em ஆக மாற்றுதல், em ஐ px ஆக மாற்றுதல். அதே பாணித்தாளின் நிறங்களுக்கு, HEX ஐ RGB ஆக மாற்றுதல், RGB ஐ HEX ஆக மாற்றுதல் குறிமுறைகளைக் கையாளுகின்றன.

ஒரு செய்முறை எடுத்துக்காட்டு

ஒரு சோதனையாளர் ஒரு சிறிய தொலைபேசியில் முதன்மைத் தலைப்பை வாசிக்கக் கடினம் என்று தெரிவிக்கிறார் என்று வைத்துக்கொள்ளுங்கள். பாணித்தாள் எந்த வரம்புகளும் இல்லாமல் font-size: 5.2vw என்று சொல்கிறது. நீங்கள் 360 இல் vw ஐ px ஆக மாற்றி 18.7 px ஐ வாசிக்கிறீர்கள், 768 இல் 39.9 px ஐ, 1440 இல் 74.9 px ஐ. குறுகிய முனையில் தலைப்பு உடல் உரையைவிடச் சற்றுப் பெரியது, இனி ஒரு தலைப்பாக வாசிக்கப்படுவதில்லை. நீங்கள் clamp(2rem, 1rem + 4vw, 5rem) ஐப் பரிந்துரைக்கிறீர்கள், அது மிகக் குறுகிய அகலத்தில் 32 px ஐயும், 768 இல் ஏறத்தாழ 51 px ஐயும், மிக அகலத்தில் 5rem, 80 px ஐயும் தருகிறது. இப்போது அது நன்றாக வாசிக்கிறது என்று சோதனையாளர் உறுதிசெய்கிறார், தலைப்பு இன்னும் அளவிடப்படுகிறது.

ஒரு குறுகிய சரிபார்ப்புப் பட்டியல்

மாற்றுவதற்கு முன்

உங்களுக்குக் கவலையான அகலங்களை, உருவாக்குநர் கருவிகளிலிருந்தோ உங்கள் இலக்குச் சாதனங்களின் பட்டியலிலிருந்தோ, தேர்ந்தெடுங்கள்.

மாற்றும்போது

vw மதிப்பையும் ஒவ்வோர் அகலத்தையும் ஒவ்வொன்றாகத் தட்டச்சு செய்து, அடிப்படையின் அருகே காட்டப்படும் படப்புள்ளிகளைக் குறித்துக்கொள்ளுங்கள்.

மாற்றிய பிறகு

உச்சங்களைப் பாருங்கள். ஓர் அளவு இரு முனைகளில் ஒன்றில் மிகச் சிறியதாகவோ மிகப் பெரியதாகவோ இருந்தால், clamp() உடன் வரம்புகளைச் சேருங்கள்.

பொதுவான தவறுகள்

ஒரே விடை என்று கருதுதல்

ஒரு vw மதிப்புக்கு ஒவ்வோர் அகலத்திலும் வேறுபட்ட படப்புள்ளி அளவு உள்ளது. ஒவ்வோர் எண்ணுடனும் அகலத்தைத் தாருங்கள்.

உருள் பட்டையை மறத்தல்

100vw அதை உள்ளடக்குகிறது, எனவே ஒரு முழு-அகலப் பெட்டி வழிந்தோடலாம்.

உடல் உரையை vw இல் மட்டும் அளவிடுதல்

அதைப் பெரிதாக்க முடியாது. ஒரு rem உறுப்பையும் வரம்புகளையும் சேருங்கள்.

உங்கள் எண்கள் உங்கள் சாதனத்திலேயே இருக்கின்றன

கணக்கு உள்ளூரிலேயே நடக்கிறது. உங்கள் மதிப்புகள் உங்கள் சொந்த உலாவியால் பயன்படுத்தப்படுகின்றன, எதுவும் எங்கும் அனுப்பப்படுவதில்லை. பின்னர் நீக்க எதுவும் இல்லை, உருவாக்க எந்தக் கணக்கும் இல்லை. vw ஐ px ஆக மாற்றும் எளிய வழி அதுவே.

சுருக்கம்

இங்கே vw ஐ px ஆக மாற்ற, vw இல் அளவையும் சாளரத்தின் அகலத்தையும் தட்டச்சு செய்து, px = vw × width ÷ 100 என்ற சூத்திரத்தைப் பயன்படுத்தி, படப்புள்ளிகளில் முடிவை உடனே வாசியுங்கள். அகலம் வடிவமைப்புகள் பெரும்பாலும் வரையப்படும் அகலமான 1440 px இல் தொடங்குகிறது, ஆனால் அது ஒரு பழக்கம், தரநிலை அல்ல, எனவே உங்கள் சொந்தத்தைத் தட்டச்சு செய்யுங்கள். மாற்றம் திரையின் பங்கை வைத்திருக்கிறது: ஒரு vw என்பது காட்சிப் பகுதி அகலத்தின் நூறில் ஒரு பங்கு, எனவே vw இல் ஓர் அளவு சாளரத்துடன் வளர்ந்து சுருங்குகிறது. rem போலன்றி, vw க்கு இயல்புநிலை இல்லை, ஏனெனில் காட்சிப் பகுதி வாசகரின் சாளரம் எவ்வளவு அகலமோ அவ்வளவு. உரைக்கு, அது வாசிக்கத்தக்கதாகவும் பெரிதாக்கத்தக்கதாகவும் இருக்க clamp() க்குள் vw ஐ rem உடன் இணையுங்கள். எதுவும் பதிவேற்றப்படுவதில்லை.