CSS வியூபோர்ட் அலகுகளில் தேர்ச்சி பெறுதல்: ரெஸ்பான்சிவ் வடிவமைப்பிற்கான ஒரு விரிவான வழிகாட்டி

தொடர்ந்து வளர்ந்து வரும் வலை மேம்பாட்டு உலகில், பல்வேறு திரை அளவுகளுக்கு ஏற்றவாறு தடையின்றி மாறும் ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்குவது மிக முக்கியமானது. CSS வியூபோர்ட் அலகுகள் (vw, vh, vmin, vmax, vi, மற்றும் vb) இதை அடைவதற்கான ஒரு சக்திவாய்ந்த வழியை வழங்குகின்றன, இது வியூபோர்ட்டைப் பொறுத்து தனிமங்களின் அளவை மாற்றுவதற்கான ஒரு நெகிழ்வான மற்றும் அளவிடக்கூடிய அணுகுமுறையை வழங்குகிறது. இந்த விரிவான வழிகாட்டி வியூபோர்ட் அலகுகளின் நுணுக்கங்களை ஆழமாக ஆராய்ந்து, அவற்றின் செயல்பாடு, நடைமுறைப் பயன்பாடுகள் மற்றும் செயல்படுத்தலுக்கான சிறந்த நடைமுறைகளை விளக்கும்.

வியூபோர்ட் அலகுகளைப் புரிந்துகொள்ளுதல்

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

முக்கிய வியூபோர்ட் அலகுகள்: vw, vh, vmin, vmax

• vw (வியூபோர்ட் அகலம்): இது வியூபோர்ட்டின் அகலத்தில் 1% குறிக்கிறது. உதாரணமாக, 10vw என்பது வியூபோர்ட் அகலத்தில் 10% க்கு சமம்.
• vh (வியூபோர்ட் உயரம்): இது வியூபோர்ட்டின் உயரத்தில் 1% குறிக்கிறது. இதேபோல், 50vh என்பது வியூபோர்ட் உயரத்தில் 50% க்கு சமம்.
• vmin (வியூபோர்ட் குறைந்தபட்சம்): இது vw மற்றும் vh க்கு இடையில் உள்ள சிறிய மதிப்பைக் குறிக்கிறது. வியூபோர்ட் உயரத்தை விட அகலமாக இருந்தால், vmin ஆனது vh க்கு சமமாக இருக்கும். மாறாக, வியூபோர்ட் அகலத்தை விட உயரமாக இருந்தால், vmin ஆனது vw க்கு சமமாக இருக்கும். இது விகிதாச்சாரத்தைப் பராமரிக்க பயனுள்ளதாக இருக்கும், குறிப்பாக சதுர அல்லது சதுரத்திற்கு அருகிலுள்ள தனிமங்களில்.
• vmax (வியூபோர்ட் அதிகபட்சம்): இது vw மற்றும் vh க்கு இடையில் உள்ள பெரிய மதிப்பைக் குறிக்கிறது. வியூபோர்ட் உயரத்தை விட அகலமாக இருந்தால், vmax ஆனது vw க்கு சமமாக இருக்கும். வியூபோர்ட் அகலத்தை விட உயரமாக இருந்தால், vmax ஆனது vh க்கு சமமாக இருக்கும். ஒரு தனிமம் வியூபோர்ட்டின் மிகப்பெரிய பரிமாணத்தை நிரப்ப வேண்டும் என்று நீங்கள் விரும்பும்போது இது பெரும்பாலும் பயன்படுத்தப்படுகிறது.

தருக்க ரீதியான வியூபோர்ட் அலகுகள்: vi, vb

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

• vi (வியூபோர்ட் இன்லைன்): இது வியூபோர்ட்டின் இன்லைன் அளவில் 1% ஐக் குறிக்கிறது, இது உள்ளடக்கம் கிடைமட்டமாக பாயும் திசையாகும் (எ.கா., பெரும்பாலான மேற்கத்திய மொழிகளில் இடமிருந்து வலம்). இடமிருந்து வலம் எழுதும் முறையில், vi ஆனது vw போலவே செயல்படுகிறது. இருப்பினும், வலமிருந்து இடமாக எழுதும் முறையில் (அரபு அல்லது ஹீப்ரு போன்றவை), vi இன்னும் கிடைமட்ட பரிமாணத்தைக் குறிக்கிறது, ஆனால் வியூபோர்ட்டின் வலது விளிம்பில் இருந்து தொடங்குகிறது.
• vb (வியூபோர்ட் பிளாக்): இது வியூபோர்ட்டின் பிளாக் அளவில் 1% ஐக் குறிக்கிறது, இது உள்ளடக்கம் செங்குத்தாக பாயும் திசையாகும். இது பெரும்பாலான பொதுவான எழுதும் முறைகளில் vh க்கு ஒப்பானது.

உதாரணம்: ஆங்கிலம் (இடமிருந்து வலம்) மற்றும் அரபு (வலமிருந்து வலம்) ஆகிய இரு மொழிகளுக்கும் வடிவமைக்கப்பட்ட ஒரு வலைத்தளத்தைக் கருத்தில் கொள்வோம். ஒரு கொள்கலனின் பக்கங்களில் பேடிங் அல்லது மார்ஜினுக்கு vi ஐப் பயன்படுத்துவது, மொழி திசையின் அடிப்படையில் சரியான பக்கத்திற்கு தானாகவே சரிசெய்து, பயனரின் மொழி விருப்பத்தைப் பொருட்படுத்தாமல் சீரான இடைவெளியை உறுதி செய்யும்.

வியூபோர்ட் அலகுகளின் நடைமுறைப் பயன்பாடுகள்

வியூபோர்ட் அலகுகளை பல்வேறு சூழ்நிலைகளில் பயன்படுத்தி ரெஸ்பான்சிவ் மற்றும் பார்வைக்கு ஈர்க்கும் வலை தளவமைப்புகளை உருவாக்கலாம். இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள்:

1. முழு-உயரப் பிரிவுகள்

முழு வியூபோர்ட்டையும் பரப்பும் முழு-உயரப் பிரிவுகளை உருவாக்குவது ஒரு பொதுவான வடிவமைப்பு முறையாகும். வியூபோர்ட் அலகுகள் இதை நம்பமுடியாத அளவிற்கு எளிதாக்குகின்றன:

.full-height-section {
 height: 100vh;
 width: 100vw; /* இது முழு அகலத்தையும் நிரப்புவதை உறுதி செய்கிறது */
}

இந்தக் குறியீடு துணுக்கு, .full-height-section தனிமம் எப்போதும் திரை அளவைப் பொருட்படுத்தாமல் முழு வியூபோர்ட் உயரத்தையும் ஆக்கிரமிப்பதை உறுதி செய்கிறது. width: 100vw; ஆனது தனிமம் முழு அகலத்தையும் நிரப்புவதை உறுதி செய்கிறது, இது ஒரு உண்மையான முழு-வியூபோர்ட் பகுதியை உருவாக்குகிறது.

2. ரெஸ்பான்சிவ் அச்சுக்கலை

வியூபோர்ட் அலகுகளைப் பயன்படுத்தி வியூபோர்ட் அளவுக்கு விகிதாசாரமாக அளவிடப்படும் ரெஸ்பான்சிவ் அச்சுக்கலையை உருவாக்கலாம். இது உரை அனைத்து சாதனங்களிலும் படிக்கக்கூடியதாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.

h1 {
 font-size: 8vw; /* எழுத்துரு அளவு வியூபோர்ட் அகலத்துடன் அளவிடப்படுகிறது */
}

p {
 font-size: 2vh; /* எழுத்துரு அளவு வியூபோர்ட் உயரத்துடன் அளவிடப்படுகிறது */
}

இந்த எடுத்துக்காட்டில், h1 தனிமத்தின் font-size ஆனது 8vw ஆக அமைக்கப்பட்டுள்ளது, அதாவது அது வியூபோர்ட் அகலத்தில் 8% ஆக இருக்கும். வியூபோர்ட் அகலம் மாறும்போது, எழுத்துரு அளவும் அதற்கேற்ப சரிசெய்யப்படும். இதேபோல், p தனிமத்தின் font-size ஆனது 2vh ஆக அமைக்கப்பட்டு, வியூபோர்ட் உயரத்துடன் அளவிடப்படுகிறது.

3. விகித விகிதப் பெட்டிகள்

படங்கள் மற்றும் வீடியோக்களுக்கான விகித விகிதங்களைப் பராமரிப்பது தந்திரமானதாக இருக்கலாம், ஆனால் வியூபோர்ட் அலகுகள், padding-top தந்திரத்துடன் இணைந்து, ஒரு எளிய தீர்வை வழங்குகின்றன:

.aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 விகித விகிதம் (உயரம்/அகலம் * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

இந்த நுட்பம் ஒரு போலி-தனிமத்தை (::before) விரும்பிய விகித விகிதத்தின் அடிப்படையில் கணக்கிடப்பட்ட padding-top மதிப்புடன் பயன்படுத்துகிறது (இந்த வழக்கில், 16:9). .aspect-ratio-box க்குள் உள்ள உள்ளடக்கம் பின்னர் முழுமையாக நிலைநிறுத்தப்பட்டு, கிடைக்கும் இடத்தை நிரப்பி, திரை அளவைப் பொருட்படுத்தாமல் விகித விகிதத்தைப் பராமரிக்கிறது. இது அவற்றின் விகிதாச்சாரத்தைப் பராமரிக்க வேண்டிய வீடியோக்கள் அல்லது படங்களை உட்பொதிப்பதற்கு மிகவும் பயனுள்ளதாக இருக்கும்.

4. நெகிழ்வான கிரிட் தளவமைப்புகளை உருவாக்குதல்

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

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* ஒவ்வொரு நெடுவரிசையும் வியூபோர்ட் அகலத்தில் குறைந்தது 20% ஆகும் */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

இங்கே, grid-template-columns பண்பு minmax(20vw, 1fr) ஐப் பயன்படுத்தி ஒவ்வொரு நெடுவரிசையும் வியூபோர்ட் அகலத்தில் குறைந்தது 20% இருப்பதை உறுதி செய்கிறது, ஆனால் கிடைக்கும் இடத்தை நிரப்ப வளர முடியும். grid-gap உம் 1vw ஐப் பயன்படுத்தி அமைக்கப்பட்டுள்ளது, இது கிரிட் தனிமங்களுக்கு இடையிலான இடைவெளி வியூபோர்ட் அளவுக்கு விகிதாசாரமாக அளவிடப்படுவதை உறுதி செய்கிறது.

5. ரெஸ்பான்சிவ் இடைவெளி மற்றும் பேடிங்

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

.container {
 padding: 5vw;
 margin-bottom: 3vh;
}

இந்த எடுத்துக்காட்டில், .container தனிமம் அனைத்து பக்கங்களிலும் வியூபோர்ட் அகலத்தில் 5% பேடிங்கையும், வியூபோர்ட் உயரத்தில் 3% கீழ் மார்ஜினையும் கொண்டுள்ளது.

6. அளவிடக்கூடிய UI தனிமங்கள்

பொத்தான்கள், உள்ளீட்டு புலங்கள் மற்றும் பிற UI தனிமங்களை வியூபோர்ட் அலகுகளைப் பயன்படுத்தி அளவிடுவதன் மூலம் மேலும் ரெஸ்பான்சிவாக மாற்றலாம். இது UI கூறுகள் அவற்றின் சார்பு விகிதாச்சாரத்தைப் பராமரிக்க அனுமதிக்கிறது, இது வெவ்வேறு திரைகளில் பயனர் அனுபவத்தை மேம்படுத்துகிறது.

.button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

.button வகுப்பு வியூபோர்ட் உயரத்தின் (2.5vh) அடிப்படையில் ஒரு எழுத்துரு அளவு மற்றும் வியூபோர்ட் உயரம் மற்றும் அகலம் இரண்டையும் அடிப்படையாகக் கொண்ட பேடிங்குடன் வரையறுக்கப்பட்டுள்ளது. இது பொத்தான் உரை படிக்கக்கூடியதாக இருப்பதையும், பொத்தான் அளவு வெவ்வேறு திரை பரிமாணங்களுடன் பொருத்தமாக சரிசெய்யப்படுவதையும் உறுதி செய்கிறது.

வியூபோர்ட் அலகுகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

வியூபோர்ட் அலகுகள் ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த வழியை வழங்கினாலும், சாத்தியமான ஆபத்துக்களைத் தவிர்க்க அவற்றை நியாயமான முறையில் பயன்படுத்துவதும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதும் முக்கியம்:

1. குறைந்தபட்ச மற்றும் அதிகபட்ச மதிப்புகளைக் கருத்தில் கொள்ளுங்கள்

வியூபோர்ட் அலகுகள் சில நேரங்களில் மிகச் சிறிய அல்லது மிகப் பெரிய திரைகளில் தீவிர மதிப்புகளுக்கு வழிவகுக்கும். இதைத் தடுக்க, வியூபோர்ட் அலகு மதிப்புகளுக்கு குறைந்தபட்ச மற்றும் அதிகபட்ச வரம்புகளை அமைக்க min(), max(), மற்றும் clamp() CSS செயல்பாடுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* எழுத்துரு அளவு குறைந்தது 2rem, அதிகபட்சம் 5rem, மற்றும் daz இடையில் வியூபோர்ட் அகலத்துடன் அளவிடப்படுகிறது */
}

clamp() செயல்பாடு மூன்று வாதங்களை எடுக்கும்: ஒரு குறைந்தபட்ச மதிப்பு, ஒரு விரும்பிய மதிப்பு, மற்றும் ஒரு அதிகபட்ச மதிப்பு. இந்த எடுத்துக்காட்டில், font-size குறைந்தது 2rem ஆகவும், அதிகபட்சம் 5rem ஆகவும் இருக்கும், மேலும் அந்த வரம்புகளுக்கு இடையில் வியூபோர்ட் அகலத்துடன் (8vw) விகிதாசாரமாக அளவிடப்படும். இது சிறிய திரைகளில் உரை மிகவும் சிறியதாகவோ அல்லது பெரிய திரைகளில் மிகவும் பெரியதாகவோ மாறுவதைத் தடுக்கிறது.

2. மற்ற அலகுகளுடன் இணைக்கவும்

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

p {
 font-size: calc(1rem + 0.5vw); /* 1rem இன் அடிப்படை எழுத்துரு அளவு மற்றும் ஒரு அளவிடுதல் காரணி */
 line-height: 1.6;
}

இந்த எடுத்துக்காட்டில், font-size ஆனது calc() செயல்பாட்டைப் பயன்படுத்தி கணக்கிடப்படுகிறது, இது 1rem இன் அடிப்படை எழுத்துரு அளவிற்கு 0.5vw இன் அளவிடுதல் காரணியைச் சேர்க்கிறது. இது சிறிய திரைகளில் கூட உரை எப்போதும் படிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது, அதே நேரத்தில் வியூபோர்ட் அளவுக்கு விகிதாசாரமாக அளவிடப்படுகிறது.

3. வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்

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

4. அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்

அச்சுக்கலைக்கு வியூபோர்ட் அலகுகளைப் பயன்படுத்தும்போது, உரை மாற்றுத்திறனாளிகளுக்குப் படிக்கக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதி செய்யவும். வண்ண மாறுபாடு, எழுத்துரு அளவு மற்றும் வரி உயரம் ஆகியவற்றில் கவனம் செலுத்துங்கள், இதனால் உரை அனைத்து பயனர்களுக்கும் எளிதாகப் படிக்கக்கூடியதாக இருக்கும். WebAIM மாறுபாடு சரிபார்ப்பு போன்ற கருவிகள் பொருத்தமான வண்ண மாறுபாடு விகிதங்களைத் தீர்மானிக்க உதவியாக இருக்கும். மேலும், html தனிமத்தில் நேரடியாக font-size அல்லது பிற அளவு தொடர்பான பண்புகளை வியூபோர்ட் அலகுகளுடன் அமைப்பதைத் தவிர்க்கவும், ஏனெனில் இது உரை அளவிடுவதற்கான பயனர் விருப்பங்களில் தலையிடக்கூடும்.

5. CSS மாறிகள் (தனிப்பயன் பண்புகள்) உடன் பயன்படுத்தவும்

CSS மாறிகளை (தனிப்பயன் பண்புகள்) வியூபோர்ட் அலகுகளுடன் பயன்படுத்துவது பராமரிப்பை மேம்படுத்துகிறது மற்றும் உங்கள் ஸ்டைல்ஷீட் முழுவதும் எளிதாக சரிசெய்தல்களை அனுமதிக்கிறது.

:root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

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

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

1. டைனமிக் சரிசெய்தல்களுக்கு ஜாவாஸ்கிரிப்ட் பயன்படுத்துதல்

சில சூழ்நிலைகளில், பயனர் தொடர்புகள் அல்லது பிற நிகழ்வுகளின் அடிப்படையில் வியூபோர்ட் அலகு மதிப்புகளை மாறும் வகையில் சரிசெய்ய வேண்டியிருக்கலாம். ஜாவாஸ்கிரிப்ட் வியூபோர்ட் பரிமாணங்களை அணுகவும் அதற்கேற்ப CSS மாறிகளைப் புதுப்பிக்கவும் பயன்படுத்தப்படலாம்.

// ஜாவாஸ்கிரிப்ட்
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // ஆரம்ப அழைப்பு

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* --vh வரையறுக்கப்படவில்லை என்றால் 1vh க்கு பின்வாங்கும் */
}

இந்தக் குறியீடு துணுக்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி வியூபோர்ட் உயரத்தைக் கணக்கிட்டு அதற்கேற்ப ஒரு CSS மாறியை (--vh) அமைக்கிறது. .element பின்னர் இந்த மாறியைப் பயன்படுத்தி அதன் உயரத்தை அமைக்கிறது, இது எப்போதும் வியூபோர்ட் உயரத்தில் 50% ஐ ஆக்கிரமிப்பதை உறுதி செய்கிறது. CSS மாறி சரியாக அமைக்கப்படவில்லை என்றாலும், தனிமம் இன்னும் ஒரு நியாயமான உயரத்தைக் கொண்டிருப்பதை `1vh` க்கு பின்வாங்குவது உறுதி செய்கிறது.

2. மொபைல் விசைப்பலகை தெரிவுநிலையைக் கையாளுதல்

மொபைல் சாதனங்களில், மெய்நிகர் விசைப்பலகை காட்டப்படும்போது வியூபோர்ட் அளவு மாறலாம். இது முழு-உயரப் பிரிவுகளுக்கு வியூபோர்ட் அலகுகளை நம்பியிருக்கும் தளவமைப்புகளில் சிக்கல்களை ஏற்படுத்தக்கூடும். இதைக் குறைக்க ஒரு அணுகுமுறை பெரிய, சிறிய மற்றும் டைனமிக் வியூபோர்ட் அலகுகளைப் பயன்படுத்துவதாகும், இது டெவலப்பர்கள் இந்த சூழ்நிலைகளுக்கான நடத்தையைக் குறிப்பிட அனுமதிக்கிறது. இவை `lvh`, `svh`, மற்றும் `dvh` அலகுகளுடன் கிடைக்கின்றன. மென்மையான விசைப்பலகை காட்டப்படும்போது `dvh` அலகு சரிசெய்யப்படுகிறது. சில பழைய உலாவிகளில் ஆதரவு குறைவாக இருக்கலாம் என்பதை நினைவில் கொள்க.

.full-height-section {
 height: 100dvh;
}

3. செயல்திறனை மேம்படுத்துதல்

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

பல்வேறு நாடுகள் மற்றும் கலாச்சாரங்களில் உள்ள எடுத்துக்காட்டுகள்

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

• கிழக்கு ஆசிய மொழிகள் (எ.கா., சீன, ஜப்பானிய, கொரிய): இந்த மொழிகளுக்கு எழுத்துக்களின் சிக்கலான தன்மை காரணமாக பெரும்பாலும் பெரிய எழுத்துரு அளவுகள் தேவைப்படுகின்றன. வியூபோர்ட் அலகுகள் திரை இடம் குறைவாக உள்ள மொபைல் சாதனங்களில் படிக்கக்கூடிய தன்மையை உறுதி செய்கின்றன. `rem` அலகுகளை அடிப்படையாகக் கொண்ட அதிகபட்ச குறைந்தபட்ச எழுத்துரு அளவுடன் `clamp()` ஐப் பயன்படுத்துவது குறிப்பாக நன்மை பயக்கும்.
• வலமிருந்து இடமாக உள்ள மொழிகள் (எ.கா., அரபு, ஹீப்ரு): தருக்க ரீதியான வியூபோர்ட் அலகுகள் (`vi`, `vb`) சீரான தளவமைப்பு திசை மற்றும் இடைவெளியைப் பராமரிக்க விலைமதிப்பற்றவை, குறிப்பாக பிரதிபலிக்கும் தளவமைப்புகள் மற்றும் சரிசெய்யப்பட்ட உள்ளடக்கப் பாய்ச்சலைக் கையாளும் போது.
• மாறுபட்ட இணைய வேகங்களைக் கொண்ட நாடுகள்: பட அளவுகளை மேம்படுத்துவதும், வேகமான ஏற்றுதல் நேரங்களை உறுதி செய்வதும் முக்கியம். வியூபோர்ட் அலகுகளுடன் உருவாக்கப்பட்ட விகித விகிதப் பெட்டிகள், மெதுவான இணைப்புகளில் வேகமாக ஏற்றுவதற்கு சிறிய கோப்பு அளவுகளுக்கு ஏற்றவாறு படங்களையும் வீடியோக்களையும் அவற்றின் விகிதாச்சாரத்தைப் பராமரிக்க அனுமதிக்கின்றன.
• கலாச்சாரங்கள் முழுவதும் அணுகல்தன்மை: அடிப்படை எழுத்துரு அளவிற்கு `rem` மற்றும் அளவிடுதலுக்கு `vw` ஆகியவற்றின் கலவையைப் பயன்படுத்துவது, பயனர்கள் தங்கள் புவியியல் இருப்பிடம் அல்லது கலாச்சார சூழலைப் பொருட்படுத்தாமல், தங்கள் தனிப்பட்ட தேவைகளின் அடிப்படையில் அளவிடுதலை மேலெழுத நெகிழ்வுத்தன்மையை வழங்குகிறது. பயனர்கள் எழுத்துரு அளவுகளை சரிசெய்ய விருப்பங்களை வழங்குவது உலகளவில் நன்மை பயக்கும்.

முடிவுரை

CSS வியூபோர்ட் அலகுகள் எந்தவொரு சாதனத்திற்கும் தடையின்றி பொருந்தக்கூடிய உண்மையான ரெஸ்பான்சிவ் மற்றும் அளவிடக்கூடிய வலை வடிவமைப்புகளை உருவாக்குவதற்கான ஒரு தவிர்க்க முடியாத கருவியாகும். vw, vh, vmin, vmax, vi, மற்றும் vb ஆகியவற்றின் செயல்பாட்டைப் புரிந்துகொண்டு, சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் வியூபோர்ட் அலகுகளின் முழு திறனையும் திறந்து, அனைத்து தளங்களிலும் சீரான அனுபவத்தை வழங்கும் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பயனர் நட்பு வலைத்தளங்களை உருவாக்கலாம். உலகளவில் அணுகக்கூடிய மற்றும் அழகியல் ரீதியாக மகிழ்ச்சிகரமான வலை அனுபவங்களை உருவாக்க இந்த அலகுகளைத் தழுவுங்கள், பயனரின் சாதனம் அல்லது கலாச்சாரப் பின்னணியைப் பொருட்படுத்தாமல்.

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