Posted on • Updated on
CSS இல் VW அலகைப் புரிந்துகொள்ளுதல்
CSS பார்வைத்திரை அகல அலகு பற்றிய அடிக்கடி கேட்கப்படும் கேள்விகள்
இறுதியாக, CSS பார்வைத்திரை அகல அலகு பற்றிய அடிக்கடி கேட்கப்படும் சில கேள்விகளுக்கு பதிலளிப்போம்.
CSS இல் vw அலகு என்றால் என்ன?
CSS இல் உள்ள vw அலகு பார்வைத்திரையின் அகலத்தை அளவிடுகிறது. பார்வைத்திரை என்பது இணையதளம் காட்டப்படும் உலாவியின் பகுதி ஆகும். vw அலகு மூலம் பார்வைத்திரையின் அகலத்தை எளிதாக அளவிட்டு, இந்தத் தெரிவுப் பகுதிக்கு ஏற்ப உறுப்புகளின் அளவை அமைக்கலாம்.
பார்வைத்திரை அகல அலகு எவ்வாறு செயல்படுகிறது?
பார்வைத்திரை அலகுகள் அதன் பரிமாணங்களின் சதவீதத்தை அடிப்படையாகக் கொண்டவை. எடுத்துக்காட்டாக, 1vw என்பது பார்வைத்திரை அகலத்தின் 1% ஆகும்.
பார்வைத்திரை அகல அலகை எப்போது பயன்படுத்த வேண்டும்?
திரை அகலத்திற்கு ஏற்ப மாறும் பதிலளிக்கக்கூடிய தளவமைப்புகளையும் உறுப்புகளையும் உருவாக்க பார்வைத்திரை அகல அலகு பயனுள்ளதாகும். பல்வேறு திரை அகலங்களிலும் சிறப்பாகத் தோன்றும் வகையில் எழுத்துரு, இடைவெளி மற்றும் உறுப்புகளின் அளவுகளுக்கு இது பெரும்பாலும் பயன்படுத்தப்படுகிறது.
பார்வைத்திரை அகல அலகின் பொதுவான பயன்பாடுகள் யாவை?
பார்வைத்திரை அகல அலகு பொதுவாக எழுத்துரு அளவுகளை அமைக்கவும், பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்கவும், கொள்கலன்கள் போன்ற உறுப்புகள் வெவ்வேறு திரை அகலங்களுக்கு நன்றாக ஏற்படுவதை உறுதிப்படுத்தவும் பயன்படுத்தப்படுகிறது.
பார்வைத்திரை அகல அலகைப் பயன்படுத்தி எழுத்துரு அளவை எவ்வாறு அமைப்பது?
font-size: 5vw; எழுத்துரு அளவை பார்வைத்திரை அகலத்தின் 5% ஆக அமைக்கும். ஆனால் சில திரைகளில் எழுத்துருக்கள் மிகப் பெரியதாகவோ மிகச் சிறியதாகவோ இருக்கலாம். CSS calc() செயல்பாட்டை (உதாரணமாக font-size: calc(110% + 0.25vw);) அல்லது CSS clamp() செயல்பாட்டை (உதாரணமாக font-size: clamp(1em, 10dvw, 15rem);) பயன்படுத்தலாம்.
பார்வைத்திரை அகல அலகு எவ்வாறு கணக்கிடப்படுகிறது?
vw என்பது வலைப்பக்கங்களின் அளவுகளையும் தளவமைப்புகளையும் வரையறுக்க CSS இல் பயன்படுத்தப்படும் சார்பு அளவீட்டு அலகாகும். இது பார்வைத்திரை, அதாவது உலாவியின் தெரியும் பகுதி, அகலத்தின் சதவீதத்தைக் குறிக்கிறது.
கணக்கீடு எளிதானது: 1vw என்பது பார்வைத்திரை அகலத்தின் 1% ஆகும்.
உதாரணமாக, பார்வைத்திரை அகலம் 1920px என்றால் 1vw என்பது 19.2px ஆகும்.
இது பார்வைத்திரை அளவுடன் மாறுவதால் பதிலளிக்கக்கூடிய வலை வடிவமைப்புக்கு பயனுள்ளதாகும். பயனர் உலாவியின் அளவை மாற்றும்போது vw அலகில் குறிப்பிடப்பட்ட உறுப்புகள் விகிதாசாரமாக மாறும்; இதனால் டெஸ்க்டாப் மற்றும் மொபைல் திரைகளில் நன்றாகத் தோன்றும் வடிவமைப்புகளை உருவாக்கலாம்.
பார்வைத்திரை அகல அலகை மற்றொரு அலகுடன் சேர்த்துப் பயன்படுத்தலாமா?
ஆம், பார்வைத்திரை அகல அலகை மற்றொரு CSS அலகுடன் இணைக்கலாம். உதாரணமாக, font-size-க்கு vw மற்றும் margin அல்லது padding-க்கு px பயன்படுத்தலாம்.
பார்வைத்திரை அகல அலகு எல்லா உலாவிகளிலும் ஆதரிக்கப்படுகிறதா?
Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகள் பார்வைத்திரை அகல அலகை ஆதரிக்கின்றன. ஆதரவு விவரங்களை caniuse ஆவணத்தில் படிக்கலாம்.
எனது குறியீட்டில் பார்வைத்திரை அகல அலகை எவ்வாறு பயன்படுத்துவது?
CSS பார்வைத்திரை அலகுகளைப் பயன்படுத்த, அவற்றை உங்கள் CSS அறிவிப்புகளில் சேர்க்க வேண்டும். உதாரணமாக, ஒரு உறுப்பின் அகலத்தை பார்வைத்திரை அகலத்தின் 50% ஆக அமைக்க எழுதுங்கள்: width: 50vw;. அதேபோல், உறுப்பின் உயரத்தை பார்வைத்திரை உயரத்தின் 70% ஆக அமைக்க எழுதுங்கள்: height: 70vh;. vmin மற்றும் vmax-ஐயும் இதே முறையில் பயன்படுத்தலாம்.
பார்வைத்திரை அகல அலகு மொபைலில் தளவமைப்பை எவ்வாறு பாதிக்கிறது?
மொபைலில் vw அலகு மற்ற எல்லா சாதனங்களிலும் செயல்படுவது போலவே செயல்படுகிறது. ஆனால் மொபைலில் திரை அகலம் பொதுவாக சிறியதாக இருப்பதால், பார்வைத்திரை அகல அலகில் குறிப்பிடப்பட்ட உறுப்புகளின் உண்மையான அளவுகள் வேறுபடலாம்.
font-size-க்கு பார்வைத்திரை அகல அலகைப் பயன்படுத்தலாமா?
ஆம், font-size அமைக்க பார்வைத்திரை அகல அலகைப் பயன்படுத்தலாம். திரை அகலத்துடன் அளவிடப்படும் பதிலளிக்கக்கூடிய அச்சுக்கலையை உருவாக்க இது பயன்படும். அச்சுக்கலையில் vw அலகைப் பயன்படுத்தும் உதாரணம்: font-size: 5vw;
பார்வைத்திரை அகல அலகிற்கும் சதவீத அலகிற்கும் என்ன வித்தியாசம்?
பார்வைத்திரை அகல அலகும் சதவீத அலகும் சார்பு அலகுகளாகும். சதவீத அலகு பெற்றோர் உறுப்பின் அளவை அடிப்படையாகக் கொண்டது; பார்வைத்திரை அகல அலகு திரை அகலத்தை அடிப்படையாகக் கொண்டது. இதனால் 50% அகலமுள்ள உறுப்பு அதன் பெற்றோரின் அகலத்தில் பாதியாக இருக்கும். 50vw அகலமுள்ள உறுப்பு திரை அகலத்தில் பாதியாக இருக்கும்.
லேண்ட்ஸ்கேப் பயன்முறையில் பார்வைத்திரை அகல அலகை எவ்வாறு கையாள்வது?
லேண்ட்ஸ்கேப் பயன்முறையில் பார்வைத்திரையின் அகலம் மாறுகிறது; எனவே பார்வைத்திரை அகல அலகு புதிய பரிமாணங்களின் அடிப்படையில் கணக்கிடப்படும். வெவ்வேறு திரை திசைகளுக்கு ஏற்ப வடிவமைப்புகளை உருவாக்க இதைப் பயன்படுத்தலாம்.
அச்சு ஸ்டைல்ஷீட்களில் பார்வைத்திரை அகல அலகைப் பயன்படுத்தலாமா?
பார்வைத்திரை அகல அலகு முக்கியமாக திரை ஊடகத்தில் பயன்படுத்த வடிவமைக்கப்பட்டது; எனவே அச்சு ஸ்டைல்ஷீட்களில் எதிர்பார்த்தபடி செயல்படாமல் இருக்கலாம். அச்சிடுவதற்கு inches அல்லது points போன்ற முழுமையான அலகுகளைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.