சதவீத மதிப்பைப் பயன்படுத்தி வலை உலாவிகள் காட்சிப்படுத்தலை எவ்வாறு கண்டெடுக்கின்றன என்பதை அறியவும்
பதிலளிக்க வலை வடிவமைப்பு பல மாணவர்கள் அகலம் மதிப்புகள் சதவீதம் பயன்படுத்தி ஒரு கடினமான நேரம். குறிப்பாக, உலாவி அந்த சதவீதத்தை எவ்வாறு கணக்கிடுகிறது என்பதில் குழப்பம் உள்ளது. கீழே ஒரு பதிலளிக்க இணையதளத்தில் அகலம் கணக்கீடுகள் வேலை எப்படி ஒரு விரிவான விளக்கம் காணலாம்.
அகல மதிப்புகளுக்கான பிக்சல்களைப் பயன்படுத்துதல்
அகல மதிப்பு என பிக்சல்களைப் பயன்படுத்தும்போது, முடிவுகள் மிகவும் நேர்மையானவை. ஒரு ஆவணத்தின் தலைப்பில் ஒரு உறுப்பு அகல மதிப்பை 100 பிக்சல்கள் அகலத்திற்கு அமைப்பதற்காக நீங்கள் CSS ஐப் பயன்படுத்தினால், அந்த உறுப்பு நீங்கள் இணையத்தின் உள்ளடக்கத்தில் அல்லது பத்தியை 100 பக்கங்களில் அமைக்க வேண்டும், பக்கம். பிக்சல்கள் ஒரு முழுமையான மதிப்பு, எனவே 100 பிக்சல்கள் 100 பிக்சல்கள் உங்கள் ஆவணத்தில் ஒரு உறுப்பு தோன்றியுள்ளன. துரதிருஷ்டவசமாக, பிக்ஸல் மதிப்புகள் புரிந்து கொள்ள எளிதாக இருக்கும்போது, அவை பதிலளிக்கக்கூடிய வலைத்தளங்களில் நன்றாக வேலை செய்யாது.
ஏதென் மார்கோட்டே "பதிலளிக்க வலை வடிவமைப்பு" என்ற வார்த்தையை உருவாக்கியது, இந்த அணுகுமுறையை 3 முக்கிய அதிபர்கள் கொண்டிருப்பதை விளக்குகிறது:
- ஒரு திரவம் கட்டம்
- திரவ ஊடக
- ஊடக கேள்விகளுக்கு
முதல் இரண்டு புள்ளிகள், ஒரு திரவ கட்டம் மற்றும் திரவ ஊடகங்கள், மதிப்புகள் அளவிடுவதற்கு, பிக்சல்களுக்கு பதிலாக சதவீதங்களைப் பயன்படுத்தி அடையப்படுகின்றன.
அகலம் மதிப்புகளுக்கான சதவீதங்களைப் பயன்படுத்துதல்
ஒரு உறுப்புக்கான அகலத்தை அமைப்பதற்கான சதவீதங்களை நீங்கள் பயன்படுத்தும் போது, ஆவணத்தில் எங்கு இருக்கும் என்பதைப் பொறுத்து, உறுப்பு காட்சிகளை காட்டும் உண்மையான அளவு மாறுபடும். சதவீதங்கள் ஒப்பீட்டு மதிப்பு, அதாவது உங்கள் ஆவணத்தில் உள்ள மற்ற உறுப்புகளுடன் ஒப்பிடப்பட்ட அளவு.
எடுத்துக்காட்டுக்கு, ஒரு படத்தின் அகலத்தை 50% ஆக அமைத்தால், அதன் சாதாரண அளவின் பாதி படத்தில் இது காண்பிக்கப்படும். இது ஒரு பொதுவான தவறான கருத்து.
ஒரு படத்தை நேராக 600 பிக்சல்கள் அகலமாகக் கொண்டிருந்தால், 50 சதவீதத்தில் காட்ட வேண்டிய CSS மதிப்பைப் பயன்படுத்தி இணைய உலாவியில் 300 பிக்சல்கள் பரவலாக இருப்பதாக அர்த்தமல்ல. இந்த சதவீத மதிப்பானது, அந்த படத்தை கொண்டிருக்கும் உறுப்புகளின் அடிப்படையில் கணக்கிடப்படுகிறது, படத்தின் சொந்த அளவு அல்ல. கொள்கலன் (இது ஒரு பிரிவு அல்லது வேறு எந்த HTML உறுப்பு இருக்க முடியும்) 1000 பிக்சல்கள் அகலமாக இருந்தால், அந்த படம் 500 பிக்சல்களில் காட்டப்படும், அந்த மதிப்பு கொள்கலன் அகலத்தில் 50% ஆகும். கொண்டிருக்கும் உறுப்பு 400 பிக்சல்கள் அகலமாக இருந்தால், படம் 200 பிக்சல்களில் மட்டுமே காட்டப்படும், ஏனெனில் அந்த மதிப்பு 50% கொள்கலன் ஆகும். கேள்விக்குரிய படத்தில் 50% அளவு உள்ளது, இது கொண்டிருக்கும் உறுப்பு முழுவதையும் சார்ந்துள்ளது.
நினைவில் கொள்ளுங்கள், பதிலளிக்க வடிவமைப்பு திரவம். எழுத்து மற்றும் அளவுகள் திரை அளவு / சாதன மாற்றங்கள் என மாறும் . இதைப் பற்றி நீங்கள் உடல்நலம் அல்லாத, அல்லாத இணைய சொற்களில் நினைத்தால், நீங்கள் பேக்கிங் பொருளுடன் நிரப்புகிற அட்டை பெட்டியைப் போன்று இருக்கிறது. பெட்டியை அந்த பொருள் கொண்டு அரை நிரப்ப வேண்டும் என்று நீங்கள் விரும்பினால், நீங்கள் தேவை பொதி அளவு பெட்டி அளவு பொறுத்து மாறுபடும். அதே வலை வடிவமைப்பு உள்ள சதவீதம் அகலங்கள் உண்மை உள்ளது.
பிற சதவிகிதம் சார்ந்த சதவீதங்கள்
பட / கொள்கலன் எடுத்துக்காட்டுகளில், பதிலளிக்கக்கூடிய படத்தை எப்படிக் காண்பிக்கும் என்பதைக் காட்டுவதற்கு நான் கொண்ட உறுப்புக்கான பிக்சல் மதிப்புகள் பயன்படுத்தினேன். உண்மையில், உள்ள உறுப்பு ஒரு சதவிகிதம் அமைக்கப்பட வேண்டும், மேலும் படம் அல்லது மற்ற கூறுகள், அந்த கொள்கலன் உள்ளே ஒரு சதவீதம் சதவீதம் அடிப்படையில் தங்கள் மதிப்புகள் கிடைக்கும்.
நடைமுறையில் இதைக் காட்டும் மற்றொரு உதாரணம் இங்கே.
"தளம்" (ஒரு பொதுவான வலை வடிவமைப்பு நடைமுறையில்) ஒரு வகுப்பில் ஒரு பிரிவுக்குள் முழு தளம் இருக்கும் ஒரு வலைத்தளம் உங்களுக்கு உள்ளது என்று கூறுங்கள். அந்த பிரிவிற்குள் நீங்கள் மூன்று செங்குத்துப் பத்திகளைக் காட்டுவீர்கள். அந்த HTML இப்படி இருக்கக்கூடும்:
இப்போது, நீங்கள் 90% என்று சொல்ல "கன்டெய்னர்" பிரிவு அளவு அமைக்க CSS பயன்படுத்தலாம். இந்த எடுத்துக்காட்டில், கொள்கலன் பிரிவுக்கு வேறு எந்த உறுப்புமும் இல்லை, அது எந்த குறிப்பிட்ட மதிப்பிற்கும் அமைக்கப்படாத உடலைக் காட்டிலும் வேறு ஒன்றும் இல்லை. இயல்பாக, உடல் 100% உலாவி சாளரமாக வழங்கப்படும். எனவே, "கொள்கலன்" பிரிவின் சதவீதம் உலாவி சாளரத்தின் அளவை அடிப்படையாகக் கொண்டிருக்கும். அந்த உலாவி சாளரத்தின் அளவை மாற்றினால், இந்த "கொள்கலன்" அளவின் அளவு இருக்கும். உலாவி சாளரமே 2000 பிக்சல்கள் அகலமாக இருந்தால், இந்த பிரிவு 1800 பிக்சல்களில் காண்பிக்கப்படும். 2000 இன் (2000 x 90 = 1800) 90 சதவிகிதம் இது கணக்கிடப்படுகிறது, இது உலாவியின் அளவு.
"கொள்கலன்" இல் உள்ள "col" பிரிவுகளில் ஒவ்வொன்றும் 30% அளவுக்கு அமைக்கப்பட்டிருந்தால், அவற்றில் ஒவ்வொன்றும் 540 பிக்சல்கள் அகலமாக இருக்கும். இது 1800 பிக்சல்களில் 30% என கணக்கிடப்படுகிறது, இது கொள்கலன் (1800 x 30 = 540) இல் வழங்கப்படுகிறது. அந்த கொள்கையின் சதவிகிதம் மாறியிருந்தால், இந்த உள் பிளவுகள், அந்த உறுப்புக் கூறுகளை சார்ந்து இருக்கும் என்பதால் அவர்கள் அளிக்கும் அளவு மாற்றும்.
2000 பிக்சல்கள் அகலத்தில் உலாவி சாளரங்கள் எஞ்சியுள்ளன என்று நாம் கருதிக் கொள்ளலாம், ஆனால் கொள்கலன் சதவிகிதம் 90% க்கு பதிலாக 80% ஆக மாற்றுவோம். இதன் அர்த்தம் 1600 பிக்சல்கள் பரவலாக இப்போது (2000 x .80 = 1600) வழங்கப்படும். நாம் எமது 3 "கோ" பிரிவின் அளவுக்கு CSS ஐ மாற்றியமைக்கவில்லை, 30 சதவிகிதத்தில் அவற்றை விட்டு விடுகிறோம், அவர்கள் இப்போது இருக்கும் பொருளைக் கொண்டு வேறுபட்டிருக்கும், அவை மாற்றியமைக்கப்பட்ட சூழல் இது மாறிவிட்டது. அந்த 3 பிளவுகள் இப்போது 480 பிக்சல்கள் அகலம் கொண்டதாக இருக்கும், இது 1600 இல் 30% அல்லது கொள்கலன் அளவு (1600 x .30 = 480) ஆகும்.
இதை மேலும் எடுத்துக்கொள்வதன் மூலம், இந்த "col" பிரிவினருக்குள் ஒரு உருவம் இருந்திருந்தால் அந்த படத்தை ஒரு சதவீதத்தை பயன்படுத்தி அளவிடப்பட்டிருந்தால், அதன் அளவைப் பொறுத்தவரை "col" ஆக இருக்கும். அந்த அளவுக்கு "col" பிரிவின் அளவு மாற்றப்பட்டது, அதனுள் இருக்கும் படமாக இருக்கும். உலாவியின் அளவு அல்லது "கொள்கலன்" மாற்றப்பட்டால், அது மூன்று "col" பிரிவுகளை பாதிக்கும், இது "col" இல் உள்ள படத்தின் அளவு மாற்றப்பட வேண்டும். இது சதவீத-உந்துதல் அளவு மதிப்புகள் வரும்.
ஒரு வலைப்பக்கத்தின் உள்ளே ஒரு உறுப்பு எவ்வாறு அதன் அகலத்திற்கான ஒரு சதவீத மதிப்பைப் பயன்படுத்தும் போது, எப்படி அந்த உறுப்பு பக்கத்தின் மார்க்கப் பகுதியில் இருக்கும் என்பதை புரிந்து கொள்ள வேண்டும் என்பதை நீங்கள் கருத்தில் கொள்ளும்போது.
சுருக்கமாக
பதிலளிக்க வலைத்தளங்களுக்கான தளவமைப்பை உருவாக்குவதில் சதவீதங்கள் முக்கிய பங்கைக் கொண்டுள்ளன. நீங்கள் பிரதிபலிக்கின்ற படங்களை பிரதிபலிக்கிறீர்களா அல்லது சதவீத அகலங்களைப் பயன்படுத்துகிறீர்களோ, உண்மையிலேயே திரவ கட்டம் ஒன்றை உருவாக்கி, அதன் அளவுகள் ஒருவருக்கொருவர் தொடர்புடையதாக இருக்கும், இந்த கணக்கீடுகள் நீங்கள் விரும்பும் தோற்றத்தை அடைவதற்குத் தேவையானதாக இருக்கும்.