HTML மற்றும் CSS உடன் பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்குவதற்கான படிகள் என்ன?

HTML மற்றும் CSS இல் பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்குவதற்கான படிகளை இந்தக் கட்டுரை விளக்குகிறது:

• வியூபோர்ட் மெட்டா டேக்
• பதிலளிக்கக்கூடிய படங்கள்
• ஃப்ளெக்ஸ்பாக்ஸ் லேஅவுட்
• கட்ட தளவமைப்பு
• ஊடக கேள்விகள்

HTML மற்றும் CSS மூலம் பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை எவ்வாறு உருவாக்குவது?

HTML மற்றும் CSS உடன் பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்குவது வெவ்வேறு திரை அளவுகள் மற்றும் தீர்மானங்களுக்கு ஏற்ப ஒரு அமைப்பை உருவாக்குவதை உள்ளடக்குகிறது. பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்க நீங்கள் பின்பற்றக்கூடிய படிகள் இங்கே:

படி 1: வியூபோர்ட் மெட்டா டேக்

' வியூபோர்ட் 'மெட்டா டேக் பதிலளிக்கக்கூடிய வலை வடிவமைப்பை உருவாக்குவதில் முக்கிய பங்கு வகிக்கிறது. இது உள்ளே செருகப்பட்டுள்ளது ' <தலை> ” HTML கோப்பின் குறிச்சொல் பின்வரும் பண்புக்கூறுகளைக் கொண்டுள்ளது:

மேலே உள்ள மெட்டா டேக் இரண்டு பண்புக்கூறுகளைக் கொண்டுள்ளது:

• ' பெயர் ” பண்புக்கூறு இந்த டேக் உருவாக்கப்பட்ட/பயன்படுத்தப்படும் செயல்பாட்டின் பெயரைக் கூறுகிறது. உதாரணமாக, அமைக்கவும் வியூபோர்ட் 'க்கு' பெயர் ” பண்புக்கூறு வெவ்வேறு சாதனங்களின் வியூபோர்ட்டை கையாள்கிறது.
• ' உள்ளடக்கம் 'பண்பு முந்தைய பண்புக்கூறு மதிப்பை வரையறுக்கிறது. இது ஒவ்வொரு சாதனத்தின் அகலத்தையும் அமைக்கிறது மற்றும் ஆவணம்/இணையப்பக்கத்தை 100% ஆக அளவிடுகிறது.

படி 2: பதிலளிக்கக்கூடிய படங்கள்

படத்தின் அளவு ஒன்றுக்கொன்று மாறுபடுவதால், அதையே அமைப்பது கடினம்” உயரம் ' அல்லது ' அகலம் ”ஒவ்வொரு படத்திற்கும் சொத்து. படத்தின் அளவு சரிசெய்யப்பட்டால், பயனர்கள் வலைப்பக்கத்தின் படத்தை திரையுடன் மறுஅளவிட மாட்டார்கள். இருப்பினும், பயனர்கள் பின்வரும் குறியீட்டின் மூலம் பதிலளிக்கக்கூடிய படத்தை அமைக்கலாம்:

' அதிகபட்ச அகலம் ” CSS பண்பு படம் அதன் ஒதுக்கப்பட்ட இடத்தில் காட்டப்படுவதை கட்டுப்படுத்துகிறது. மதிப்பை “%” இல் அமைப்பதன் மூலம், அதன் மூல உறுப்பின் மறுஅளவுடன் படத்தின் அளவை மாற்றுகிறது. இது படத்திற்கு பதிலளிக்கக்கூடிய விளைவை உருவாக்குகிறது.

படி 3: ஃப்ளெக்ஸ்பாக்ஸ் லேஅவுட்

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

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில், ' என்ற ஐடியுடன் ஒரு பெற்றோர் DIV உறுப்பை உருவாக்கவும் பெற்றோர் 'உள்ளே' <உடல்> ” குறிச்சொல்.
• அடுத்து, பல குழந்தை பிரிவு கூறுகளை உருவாக்கி அவர்களுக்கு '' என்ற வகுப்பை ஒதுக்கவும் குழந்தை ”.
• பின்னர், '' என்பதைத் தேர்ந்தெடுக்கவும் பெற்றோர் 'வகுப்பு மற்றும் மதிப்பை வழங்கவும்' நெகிழ்வு 'சிஎஸ்எஸ்க்கு' காட்சி ”சொத்து.
• அதன் பிறகு, ஒரு மதிப்பை வழங்கவும் ' 1 'க்கு' நெகிழ்வு 'ஒவ்வொருவருக்கும் சொத்து' குழந்தை ” குழந்தை உறுப்பு ஒரு நெகிழ்வாக காட்சியளிக்கும் வகுப்பு.

மேலே உள்ள குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

உலாவி மறுஅளவிடப்படும் போது குழந்தை உறுப்பு சம அகலத்தைப் பெறுவதை மேலே உள்ள வெளியீடு காட்டுகிறது.

படி 4: கட்ட தளவமைப்பு

கட்ட தளவமைப்பு ஒரு கட்டத்தை உருவாக்குகிறது மற்றும் கட்டம் பகுதிக்குள் HTML கூறுகளை ஒதுக்குகிறது. வலைப்பக்கத்தின் திரை அளவோடு தொடர்புடைய கட்ட உறுப்புகள் மாறுகின்றன. சாதனத் திரைக்கு ஏற்ப HTML உறுப்பு அளவு மாறும்போது இது பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்குகிறது:

மேலே உள்ள குறியீட்டில்:

• முதலில், ஒரு பெற்றோர் டிவியை உருவாக்கி அதற்கு ஒரு வகுப்பை ஒதுக்கவும் கூறு 'உள்ளே' <உடல்> ” குறிச்சொல். அதன் பிறகு, அதில் மூன்று குழந்தை பிரிவு கூறுகளை உருவாக்கவும்.
• பின்னர், CSS கோப்பில் ஒரு ' கட்டம் 'மதிப்பு' காட்சி 'சொத்து' கொள்கலன் ” div.
• அதன் பிறகு, '' ஐப் பயன்படுத்தி வலைப்பக்கத்தில் மூன்று சம அளவிலான பகுதிகளை உருவாக்கவும். கட்டம்-வார்ப்புரு-நெடுவரிசை 'சொத்து மற்றும் அதை சமமாக அமைக்கவும்' 1fr 1fr 1fr 'எங்கு fr என்றால்' பின்னம் ”.

மேலே உள்ள குறியீட்டைத் தொகுத்த பிறகு, வெளியீடு இப்படி இருக்கும்:

சம விகிதாச்சாரத்துடன் திரையின் அளவின்படி divs தங்களை மறுஅளவிடுவதை வெளியீடு காட்டுகிறது.

படி 5: மீடியா கேள்விகள்

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

உதாரணமாக, கீழே உள்ள குறியீடு துணுக்கைப் பார்க்கவும்:

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில், தேர்ந்தெடுக்கப்பட்ட உறுப்பு வகுப்பிற்கு CSS பண்புகளைப் பயன்படுத்தும் மீடியா வினவலை அமைக்கவும். கூறு 'திரை அளவு அகலம் அதிகமாகும் போது' 640px ”.
• அடுத்து, 'கூறு வகுப்பைத் தேர்ந்தெடுத்து மதிப்பை அமைக்கவும்' காடுபச்சை ' அதற்காக ' பின்னணி நிறம் ”சொத்து.

பின்னர் மேலே உள்ள குறியீடு துணுக்கிற்கு:

• 'ஐ விட அகல அளவு சிறியதாக இருக்கும் போது ஸ்டைல்களைப் பயன்படுத்த மீடியா வினவலை அமைக்கவும் 1000px ”.
• இப்போது,' என்பதைத் தேர்ந்தெடுக்கவும் கூறு 'வகுப்பு மற்றும் மதிப்பை வழங்கவும்' டாட்ஜர்ப்ளூ ' அதற்காக ' பின்னணி நிறம் 'சொத்து:

மேலே உள்ள குறியீடு துணுக்குகளை இயக்கிய பிறகு, வெளியீடு இப்படி இருக்கும்:

மீடியா வினவல் திரையின் அளவின் அடிப்படையில் பின்னணியை மாற்றுகிறது என்பதை வெளியீடு காட்டுகிறது. அதே மாதிரியைப் பின்பற்றுவதன் மூலம் எழுத்துரு அளவு, அகலம், உயரம் மற்றும் பிற CSS பண்புகளையும் பயன்படுத்தலாம்.

மீடியா வினவல்களைப் பயன்படுத்தும் போது பரிசீலிக்கப்பட வேண்டிய சாத்தியமான பிரேக் பாயிண்ட்ஸ் ஸ்கிரீன் அளவுகள்:

• ' சிறிய 'திரை அளவு, அகலத்தை விட சிறியதாக அமைக்கவும்' 640px ”.
• ' நடுத்தர 'வியூபோர்ட் திரை அளவு, அகலம் வரம்புகள் இடையே' 641px 'மற்றும்' 1007px ”.
• ' பெரிய 'திரை அளவு, அகலத்தை அமைக்கவும்' 1008px ” அல்லது அதற்கு மேல்.

முடிவுரை

பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்க, டெவலப்பர்கள் ' வியூபோர்ட் '' குறிச்சொல்லில் ' <தலை> ” குறிச்சொல் பகுதி. அடுத்து, '' ஐப் பயன்படுத்தவும் ஃப்ளெக்ஸ்பாக்ஸ் 'மற்றும்' கட்டம் ” தளவமைப்பு. இந்த தளவமைப்பு தொகுதிகள் பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்க உதவுகின்றன. இறுதியில், ' ஊடக கேள்விகள் ” வெவ்வேறு திரை அளவுகளுக்கு ஒரே இணையதளத்தின் வெவ்வேறு பதிப்புகளை வடிவமைக்க டெவலப்பருக்கு உதவுங்கள். பதிலளிக்கக்கூடிய இணையதள வடிவமைப்பை உருவாக்குவதற்கான படிகளை இந்தக் கட்டுரை விளக்கியுள்ளது.