பதிலளிக்கக்கூடிய வலைத்தளத்தை எவ்வாறு உருவாக்குவது? அதை மாற்றவும்!

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

¿பதிலளிக்கக்கூடிய வலைத்தளத்தை எவ்வாறு உருவாக்குவது?

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

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

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

பதிலளிக்கக்கூடிய வலையை எவ்வாறு உருவாக்குவது என்பதைத் தெரிந்துகொள்வதன் முக்கியத்துவம்

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

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

பதிலளிக்கக்கூடிய வலை வடிவமைப்பு என்றால் என்ன

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

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

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

• எளிமையானது
• பொருளாதாரம்
• வேகமாக
• மேலே உள்ள எல்லாவற்றிற்கும் மேலாக, அவை முழுமையாக செயல்படுகின்றன

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

வலைப்பக்கங்களின் வடிவமைப்பு மற்றும் மேம்பாடு தொடர்பான சிக்கலானது 2010 களில் இருந்து தோன்றியதாகக் கூறலாம், நேவிகேஷன் கொண்ட மொபைல் போன்கள் இணையக் காட்சியில் தோன்றத் தொடங்கியது. பிசியைப் போலவே Google, Firefox, Explorer போன்ற உலாவிகளைப் பயன்படுத்தியது. பல்வேறு இணைய தளங்களைப் பார்வையிடும் புதிய சாத்தியக்கூறுகளில் இவ்வாறு மாறுதல். இந்த நேரத்தில், இணைய அணுகலுடன் கூடிய முதல் மின்னணு மாத்திரைகள் தோன்றத் தொடங்கின.

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

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

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

• திரை அளவு
• திரை தீர்மானம்
• CPU சக்தி
• இயங்கு
• மற்றவற்றுடன் நினைவக திறன்.

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

ரெஸ்பான்சிவ் வெப் உருவாக்குவதில் உள்ள சிக்கலுக்கான காரணம் என்ன?

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

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

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

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

• தளவமைப்புகள்
• வடிவமைப்பாளர்கள்
• புரோகிராமர்கள்
• வணிக மற்றும் டிஜிட்டல் மார்க்கெட்டிங் ஊழியர்கள்

வடிவமைப்பு நேரத்தை குறைக்கவும்

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

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

இதற்கிடையில், என்ன செய்ய முடியும்?

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

முதலில் செய்ய வேண்டியது, வழிசெலுத்தல் தளம் எந்த வகையான வலை வடிவமைப்பைக் கொண்டுள்ளது என்பதைச் சரிபார்க்க வேண்டும். முக்கியமாக சரிபார்க்கவும்:

• வலைத்தளத்தின் தளவமைப்பு
• Html மற்றும் CSS அடிப்படையில் அதன் அமைப்பு என்ன?

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

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

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

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

இருப்பினும், தளத்தை மாற்றியமைத்தல் மற்றும் மேம்படுத்துதல் ஆகியவற்றிற்கு மாற்றாக கொடுக்கப்பட்டால், மேற்கொள்ளப்படும் பணிக்கு சாதகமாக இருக்கும் சில முன் பரிசீலனைகளை அறிந்து கொள்வது வசதியானது.

ஏற்கனவே உள்ள இணைய இயக்கத்தை சரிபார்க்கவும்

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

ஒரு நல்ல உத்வேகம் அவசியம்

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

சொற்பொருள் Html உதவிகள்

சொற்பொருள் Html இன் பயன்பாடு அசல் வலைத்தளத்தின் தளவமைப்பு சரியாக நிறுவப்பட்டதைக் குறிக்கிறது. அத்தியாவசிய Html கூறுகள் மட்டுமே பயன்படுத்தப்பட்டதால், இது சாதகமாக உள்ளது அல்லது பெரும் உதவியாக உள்ளது. வலையின் வளர்ச்சியை மனதில் கொண்டு, அதே வலையின் வடிவமைப்பிற்கு மேலே உள்ள ஒவ்வொரு குறிச்சொல்லின் சொற்பொருள். வகுப்புகள் மற்றும் ஐடிகளின் படி, வடிவமைப்பின் சொந்த வேலையை CSS க்கு விட்டுவிடலாம்.

பதிலளிக்கக்கூடிய வலைத்தளத்தை எவ்வாறு உருவாக்குவது என்ற செயல்பாட்டின் போது, ​​இது போன்ற கூறுகள்:

• DIV ஐ
• P
• UL
• எல்ஐ, மற்றவர்கள் மத்தியில்

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

பதிலளிக்கக்கூடிய வலைத்தளத்தை எவ்வாறு உருவாக்குவது என்பதை சரியாக பெரிதாக்கவும்

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

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

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

சாதனத்தின் அகலம் அல்லது சாதனத்தின் அகலம்

மாறி அகலம்=சாதன அகலம் உள்ளமைவில் சேர்க்கப்பட்டுள்ளது, இதனால் திரையின் பிக்சல்களில் உள்ள அகலம் மொபைல் சாதனத்தின் அகலத்துடன் பொருந்துகிறது. இந்த வழியில், மொபைலின் சொந்த தீர்மானம் காட்டப்படும்.

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

இது பயனர்கள் அதை ஓரளவு பொருத்தமற்றதாகவோ அல்லது குழப்பமாகவோ கண்டறியலாம், பின்னர் உள்ளடக்கத்துடன் ஈடுபட பெரிதாக்க இருமுறை தட்ட வேண்டும். வியூபோர்ட் மெட்டா டேக் மாறியைப் பயன்படுத்துதல்: width=device-width அகலத்தை சரிசெய்ய தளவமைப்பில் ஒரு செயலைக் கோருகிறது. சிறிய செல்போனில் அல்லது பிசி மானிட்டரில் காட்டப்பட்டாலும், வெவ்வேறு திரைப் பரிமாணங்களுக்குப் பொருத்தமாக, உள்ளடக்கத்தை பக்கமானது மறுசீரமைக்க முடியும்.

ஆரம்ப-அளவு அல்லது ஆரம்ப அளவு

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

1. ஆரம்ப அளவிலான மாறி 1.0 க்கு சமமாக இருக்கும்போது, ​​​​அது பெரிதாக்கம் இல்லாத காட்சியைக் குறிக்கிறது, ஏனெனில் இது ஒன்றுக்கு ஒன்று.
2. ஆரம்ப அளவு = 2.0 எனில், மாறி என்பது முழுப் பக்கத்திலும் அதன் அளவை விட இரண்டு மடங்கு பெரிதாக்கப்பட்ட ஜூமைக் குறிக்கிறது.

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

அடிப்படை வியூபோர்ட் கட்டமைப்புகள் - பயன்பாட்டு எடுத்துக்காட்டுகள்:

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

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

முந்தைய உள்ளமைவு, மொபைல் தெளிவுத்திறனுக்கு ஏற்றவாறு பதிலளிக்கக்கூடிய வடிவமைப்பைக் கொண்ட இணையதளத்திற்கானதாக இருக்கும். மொபைல் தெளிவுத்திறனுடன் முழுமையாக மாற்றியமைக்கப்படாத வலைத்தளத்திற்கு, கட்டமைப்பு பின்வருமாறு இருக்கும்:

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

பதிலளிக்கக்கூடிய இணையதளத்தை உருவாக்குவது எப்படி - மீடியா கேள்விகள்

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

ஊடக கேள்விகள்

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

• முதலில், CSS கோப்பிற்கான அழைப்பில், அதை ஏற்றுவதற்கான நிபந்தனைகள் என்ன என்பதை ஒவ்வொன்றிலும் குறிப்பிடுகிறது. உதாரணமாக:

• இரண்டாவதாக, அதே CSS கோப்பில், CSS பின்னங்கள் சேர்க்கப்படும் ஒரு தனி இடத்தை நிறுவுதல். எடுத்துக்காட்டு:

@மீடியா திரை மற்றும் (குறைந்த அகலம்:320px) மற்றும் (அதிகபட்ச அகலம்:480px){

/*இந்த அகல வரம்பிற்கான உடை அறிவிப்புகள் */

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

இதற்கிடையில், இப்போது ஊடக வினவல் அமைப்பு பற்றி இரண்டு புள்ளிகளை அறிந்து கொள்வது போதுமானது:

1. CSS கோப்பில் மீடியா வினவல்களின் அறிவிப்புகளை உருவாக்குவதற்கான வழி
2. பழங்கால இணைய உலாவிகளுக்கு மீடியா வினவல் நுட்பத்தை வழங்குவதன் மூலம் எவ்வாறு புதுப்பிப்பது

மீடியா கேள்வி அறிவிப்பு

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

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

எடுத்துக்காட்டு, மீடியா வினவல் மூலம் வரையறுக்கப்பட்ட நிபந்தனைக்குள் இருக்கும் CSS பின்னத்தை அறிவிப்பதற்கான வழி, பின்வரும் தொடரியல் உள்ளமைவைக் கொண்டுள்ளது:

@மீடியா திரை மற்றும் ([CONDITION]) {

/* இந்தத் திரை அகலம் அல்லது அதற்கும் குறைவான எங்களின் புதிய விதிகள் */

}

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

-முதல் அறிவிப்பு பிக்சல்கள் = X அகலத்திற்குக் குறைவான தீர்மானங்களில் மட்டுமே பயன்படுத்தப்பட வேண்டும்:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்:[WIDTH]px) {

/* இந்தத் திரை அகலம் அல்லது அதற்கும் குறைவான எங்களின் புதிய விதிகள் */

}

இரண்டாவது பிரகடனம் பிக்சல்கள் = X அகலத்தை விட அதிகமான தீர்மானங்களில் மட்டுமே பயன்படுத்தப்பட வேண்டும்:

@மீடியா திரை மற்றும் (குறைந்த அகலம்:[WIDTH]px) {

/* இந்தத் திரை அகலம் அல்லது அதற்கும் அதிகமான எங்களின் புதிய விதிகள் */

}

X மற்றும் Y க்கு இடையில் வரையறுக்கப்பட்ட பிக்சல்கள் வரம்பிற்கு இடையே அகலம் கொண்ட தீர்மானங்களில் மூன்றாவது அறிவிப்பு பயன்படுத்தப்பட வேண்டும்:

@மீடியா திரை மற்றும் (குறைந்த அகலம்:[WIDTH X]px) மற்றும் (அதிகபட்ச அகலம்:[WIDTH Y]px) {

/* இந்தத் திரை அகலம் அல்லது அதற்கும் அதிகமான எங்களின் புதிய விதிகள் */

}

மூன்றில் எது?

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

இன்டர்நெட் எக்ஸ்புளோரருடன் மீடியா வினவல்களை இணங்கச் செய்யுங்கள்

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

இண்டர்நெட் எக்ஸ்புளோரரின் ஒன்பது (9) ஐ விட இணக்கமான பதிப்புகளை உருவாக்க. இது பின்வரும் ஜாவாஸ்கிரிப்ட் நூலகத்தைப் பயன்படுத்துகிறது: css3-mediaqueries-js.

பின்வரும் ஸ்கிரிப்டை இணையதளத்தின் தலைப்பில் வைப்பதன் மூலம், எந்த சிரமமும் இல்லாமல் ஊடக வினவல்களுடன் நீங்கள் வேலை செய்ய முடியும்.

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

பதிலளிக்கக்கூடிய வலைத்தளத்தை எவ்வாறு உருவாக்குவது - அடிப்படை வடிவமைப்புகள்

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

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

வேலையை எளிதாக்குவதற்கான அடிப்படை வடிவமைப்புகள்

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

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

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

பெரிய திரைகளுக்கு பதிலளிக்கக்கூடிய வலையை எவ்வாறு உருவாக்குவது - தீர்வு

இந்த அடிப்படை புள்ளியில் இது பொதுவாக எந்த பெரிய சிரமத்தையும் பிரதிநிதித்துவப்படுத்தாது. ஏனெனில் இந்த பெரிய திரை வடிவங்களில் பார்க்கக்கூடிய வகையில் வலை வடிவமைக்கப்பட்டுள்ளது. தற்போதைய தரநிலை என்னவென்றால், இணையதளங்கள் பிக்சல்கள் 960 பிக்சல்களில் உள்ள திரை அகலத்தின் மையச் சட்டத்தை அடிப்படையாகக் கொண்டவை. அவ்வாறு மாற்றியமைக்கப்பட்ட ஜூம் மூலம் மொபைல் ஃபோன்களில் ஏற்றப்படும் போது, ​​அது பெரும்பாலானவற்றில் சரியாகப் பொருந்துகிறது. ஆனால் பழைய இணையதளங்களைப் பொறுத்தவரை, அந்த பிக்சல்-அகல மையச் சட்டகம் 1024 பிக்சல்கள் அகலம் கொண்ட திரைகளுக்காக வடிவமைக்கப்பட்டிருக்கலாம். எந்தவொரு சந்தர்ப்பத்திலும், இந்த அடிப்படைக் குழுவிற்கு பின்வரும் தொடரியல் மூலம் சுட்டிக்காட்டப்பட்ட கொள்கலன்களைப் பயன்படுத்துவது நியாயமானது:

#முக்கிய {அகலம்:960px; விளிம்பு: 0 ஆட்டோ; }

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

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

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

சிறிய திரைகளுக்கு பதிலளிக்கக்கூடிய வலையை எவ்வாறு உருவாக்குவது - தீர்வு

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

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

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

வரம்புகளை அமைக்க தகவல் தேவை

மொபைல் சாதனங்களிலிருந்து தகவல் கீழே பகிரப்பட்டுள்ளது. சிறிய திரையாக இருப்பதை நிறுத்தும்போது, ​​மொபைல் சாதனமாக மாறுவதற்கான வரம்புகளை நிறுவும் போது இது மிகவும் முக்கியத்துவம் வாய்ந்ததாக இருக்கும். இது முடிவை எளிதாக்கும்.

மொபைல் தரவு:

• செங்குத்தாகப் பயன்படுத்தப்படும் மொபைல்கள், இது அடிக்கடி பயன்படுத்தப்படும் வடிவமாகும். இது பொதுவாக 320 பிக்சல்கள் அகலத்தின் தீர்மானத்தை ஏற்றுக்கொள்கிறது.
• கிடைமட்ட நிலையில், மொபைல் தெளிவுத்திறன் சாதனத் திரையின் உண்மையான அளவிற்கு சரிசெய்யப்படுகிறது. இந்த தெளிவுத்திறன் பொதுவாக 400 முதல் 600 பிக்சல்கள் அகலம் கொண்டது.
• மறுபுறம், டேப்லெட்களில், தீர்மானம் சாதனத்தைப் பொறுத்தது. பொதுவாக, சிறந்த விற்பனையான மாடல்களின் புள்ளிவிவரங்களை கணக்கில் எடுத்துக்கொண்டால், தீர்மானம் சுமார் 600 பிக்சல்கள் அகலம் கொண்டது. 1024 பிக்சல்கள் அகலத்தை கூட அடைய முடியும்.

திரை அகல வரம்புகள்

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

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

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

சிறிய திரை தீர்வு முக்கிய வழிசெலுத்தல் பாணிகள்

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

• மொபைல் சாதனங்கள் செங்குத்தாகப் பயன்படுத்தப்படுகின்றன: இந்த வழக்கில், சாதனத் திரையானது 320 மற்றும் 400 பிக்சல்களுக்கு இடையே உள்ள தெளிவுத்திறன் வரம்பில் நிறுவப்பட்ட வாசிப்பு மற்றும் மிகவும் எளிமையான வழிசெலுத்தலை மட்டுமே அனுமதிக்கிறது.
• மொபைல் சாதனங்கள் கிடைமட்டமாகவும் டேப்லெட்டுகளாகவும் பயன்படுத்தப்படுகின்றன: இந்த வழக்கில், ஒரு பாரம்பரிய கிடைமட்ட காட்சி ஏற்கனவே அடைய முடியும். இருப்பினும், வழிசெலுத்தல் தொடுவதன் மூலம் உருவாக்கப்படுகிறது மற்றும் கிளிக் செய்வதன் மூலம் அல்ல என்பதை கவனத்தில் கொள்ள வேண்டும். இதன்படி செயல்கள் தவிர்க்கப்பட வேண்டும்: onMouseOver 400, 600 அல்லது 800 பிக்சல்களில்.
• மேஜை சாதனங்கள்: இந்தச் சமயங்களில், 800 பிக்சல்களுக்கு மேல் திரை அகலத்தில் எந்தப் பிரச்சனையும் இல்லாமல் சாதாரண வலை வடிவமைப்பு செயல்படுகிறது.

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

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

உலகளாவிய அகல கொள்கலன்கள்

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

#முக்கிய {max-width:960px; குறைந்தபட்ச அகலம்:320px; விளிம்பு:0 ஆட்டோ;}

பெரிய திரைகளுக்கு ஒரே தீர்வுதான். மேலும், இருப்பினும், வலை படிப்படியாக ஒரே நேரத்தில் அளவு குறையும் போது, ​​மைய சட்டகம் அகலத்தில் செய்யும்.

நடைமுறை உதாரணம்

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

#தலைப்பு #மேல் {நிலை:உறவினர்; அதிகபட்ச அகலம்:1074px; குறைந்தபட்ச அகலம்:320px; உயரம்:115px; விளிம்பு: 0 ஆட்டோ; […]}

[...]

#தலைப்பு உல்.மெனு {நிலை:உறவினர்; அதிகபட்ச அகலம்:1008px; குறைந்தபட்ச அகலம்:320px; உயரம்:95px; […]}

[...]

#aux-main{position:relative; அதிகபட்ச அகலம்:1008px; குறைந்தபட்ச அகலம்:320px; விளிம்பு: 0 ஆட்டோ; […]}

[...]

#அடிக்குறிப்பு ul {max-width:768px; குறைந்தபட்ச அகலம்:320px; விளிம்பு:10px தானியங்கு;}

உள்துறை கொள்கலன்கள்

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

• நூறு சதவீத அகல தலைப்பு
• அகலத்தின் கணிசமான பகுதியை உள்ளடக்கிய உள்ளடக்கம்
• பக்கத்தின் ஒரு பகுதியில் ஒன்று அல்லது அதற்கு மேற்பட்ட பக்கப்பட்டிகள் அல்லது பக்கவாட்டு பட்டைகள்
• நூறு சதவீத அகலத்தை ஆக்கிரமித்து, ஒரு அடிக்குறிப்பு

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

• மிகப்பெரிய அளவில் மிதக்கிறது
• காட்சி:சில சந்தர்ப்பங்களில் இன்லைன்
• மற்றவற்றில் காட்சி:பெட்டி

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

• அகலங்கள்
• அதிகபட்ச அகலங்கள்
• விளிம்புகள் மற்றும்
• திணிப்பு

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

[உள் உறுப்பு அகலத்தின் Px] / [Px of parent element width] * 100

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

சதவீதங்களின் கணக்கீடு

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

#முக்கிய #உள்ளடக்கம் { மிதவை:இடது; அகலம்:63.9880952%; விளிம்பு:30px 0 0 1.98412698%; }

[...]

#முக்கிய #பக்கப்பட்டி { மிதவை:இடது; விளிம்பு:20px 0 0 3.47222222%; அகலம்:28.7698413%; }

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

அளவு அதிகரிக்கும் தளர்வான உள்துறை கூறுகளுக்கான தீர்வு

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

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

#முக்கிய #உள்ளடக்கம் { மிதவை:இடது; அகலம்:63.9880952%; விளிம்பு:30px 0 0 1.98412698%; }

#முக்கிய #உள்ளடக்கம் * {அதிகபட்ச அகலம்:100%}

[...]

#முக்கிய #பக்கப்பட்டி { மிதவை:இடது; விளிம்பு:20px 0 0 3.47222222%; அகலம்:28.7698413%; }

#முக்கிய #பக்கப்பட்டி * {அதிகபட்ச அகலம்:100%}

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

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

[...]

#தலைப்பு #மேல் p.breadcrumb {நிலை: முழுமையான; மேல்:90px; இடது:3.72439479%; நிறம்:வெள்ளை;}

[...]

#தலைப்பு #மேல் ப. போன்ற { நிலை: முழுமையான; மேல்:10px; இடது:54.0037244%; }

[...]

#தலைப்பு #மேல் div.கார்டு{நிலை: முழுமையான; மேல்:11px; வலது:5.49348231%; அகலம்:27.9329609%;}

உள் உறுப்புகளில் மீடியா வினவல்களைப் பயன்படுத்துதல்

பக்கத்தின் அகலத்தை மாற்றியமைக்கும் போது, ​​அவற்றின் உள்ளடக்கம் காரணமாக, மறு வடிவமைப்பில் இடம் கிடைக்காத கூறுகள் இருக்கலாம். தழுவல்களை மோசமாக்குவதன் மூலம் இவை வழிக்கு வரலாம். இந்த மோசமான சூழ்நிலையைத் தவிர்ப்பதற்காக, சில குறிப்பிட்ட பரிமாணங்கள் நிகழும்போது, ​​CSS ஐ கடுமையாக மாற்ற அனுமதிக்கும் எளிய ஊடக வினவல்கள் பயன்படுத்தப்படுகின்றன.

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

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்:[WIDTH]px) {

/* இந்தத் திரை அகலம் அல்லது அதற்கும் குறைவான எங்களின் புதிய விதிகள் */

}

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

சொல்லப்பட்டதை எடுத்துக்காட்டுவதற்கு, 800 மற்றும் 600 பிக்சல்களுக்குக் குறைவான தீர்மானங்களின் சில கூறுகள் மறைக்கப்படும். ஒரு சந்தர்ப்பத்தில், வலைத்தளத்தின் பிரதான பக்கத்தின் உள்ளடக்கத்தை மாற்றியமைக்க அவை சரியான பார்வையைத் தடுக்கின்றன. பின்வரும் தொடரியல் படி:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 800px) {

#தலைப்பு #மேல் p.like,

#தலைப்பு #மேல் ப.பிரெட்க்ரம்ப்,

#தலைப்பு #மேல் div.vcard p.twitter,

#தலைப்பு #மேல் div.vcard p.linkedin,

#தலைப்பு #மேல் div.vcard p.delicious,

#தலைப்பு #மேல் div.card p.google,

.vcard h2{ display:none;}

}

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 600px) {

#sidebar .twitter {display:none;}

}

நீங்கள் பார்க்கிறபடி, அவை 800 பிக்சல்களுக்கும் குறைவான தெளிவுத்திறனில் மறைக்கப்படுகின்றன:

- பிடிக்கும்

- பிரட்தூள்

சமூக பொத்தான்கள், மற்றவற்றுடன்

600 பிக்சல்கள் முதல் கடைசி ட்வீட்கள் பக்கப்பட்டியில் இருந்து அகற்றப்படுகின்றன

மீடியா வினவல்கள் சில பாணிகளை மாற்றவும் அனுமதிக்கின்றன

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

வேலை செய்யும் இணையத்தில், சமூக பொத்தான்கள் இந்த வகையான சிக்கலை ஏற்படுத்துகின்றன என்று வைத்துக்கொள்வோம். பக்கமானது 960 பிக்சல்கள் அகலத்திற்குக் கீழே குறையும் போது, ​​ஐகான்களை அகற்றி, எழுத்துரு அளவைக் குறைப்பதன் மூலம், அதன் வடிவமைப்பை நுட்பமாக மாற்ற முடிவு செய்கிறது. பின்னர் கட்டமைப்பு பின்வருமாறு இருக்கும்:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்:960px) {

#header #top div.vcard p {font-size:9px;}

#தலைப்பு #மேல் div.vcard p.twitter a,

#தலைப்பு #மேல் div.கார்டு p.linkedin a ,

#தலைப்பு #மேல் div.கார்டு ப.சுவையான ஒரு,

#header #top div.vcard p.google a {background:none; திணிப்பு:0;அகலம்:50%; மிதவை:இடது;}

}

மெனுக்களை என்ன செய்வது

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

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

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

தேர்ந்தெடுக்கப்பட்ட உறுப்புடன் செயல்முறை

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

• ஸ்கிரிப்டைச் சேர்த்து, jQuery செருகுநிரலில் புதிய உறுப்புக்கு அழைப்பை அமைக்கவும். பின்வருவனவற்றின் படி:

$(«.மெனு உல்»).tinyNav();

இந்த உள்ளமைவு மேல் மெனுவில் உள்ள ஒவ்வொரு இணைப்பு பட்டியல்களிலும் தேர்ந்தெடுக்கப்பட்டதை சேர்க்கிறது

• பின்வரும் அறிவிப்புடன், புதிய தேர்ந்தெடுக்கப்பட்ட கூறுகளை மறைக்க அடிப்படை CSS க்கு சொல்லுங்கள்:

.tinynav { காட்சி: எதுவுமில்லை }

• பொருத்தமான மீடியா வினவலைப் பயன்படுத்தி, அதில் தேர்ந்தெடுக்கப்பட்ட வடிவமைப்பையும் பட்டியலை மறைப்பதற்கான வரிசையையும் சேர்க்கவும். பின்வருமாறு கட்டமைப்பை விட்டு:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 800px) {

#header ul.menu li ul {display:none}

.tinynav { காட்சி: தொகுதி; நிலை: முழுமையான; கீழே: 5px; அகலம்:79%; விளிம்பு-இடது:15%}

}

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

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

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

சில தீர்வுகள்

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

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

எரிச்சலூட்டும் மூன்று வகையான பின்னணிப் படங்களுக்கான பிற தீர்வுகள்:

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

மொபைல் திரைக்கு பதிலளிக்கக்கூடிய வலையை எவ்வாறு உருவாக்குவது - தீர்வு

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

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

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

இந்த வழக்கில் வியூபோர்ட் டேக்

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

1 விருப்பம்: மொபைல் ரெசல்யூஷன்களுடன் போதுமான அளவில் இணைக்கப்பட்ட, பதிலளிக்கக்கூடிய வடிவமைப்பைக் கொண்ட இணையதளங்களுக்கு, பின்வருபவை கிடைக்கின்றன:

இந்த விருப்பம் மிகவும் சிறந்தது, ஆனால் மிகவும் உழைப்பு. ஏனெனில் நீங்கள் 500 அல்லது 400 பிக்சல்களுக்குக் கீழே நெடுவரிசையின் அகலத்தைக் குறைக்கும்போது, ​​அகலங்கள் முற்றிலும் நிர்வகிக்க முடியாததாகிவிடும். எனவே, இணையத்தின் காட்சிப்படுத்தலில் தீவிர மாற்றங்கள் செய்யப்பட வேண்டும்.

2 விருப்பம்: மொபைலின் தெளிவுத்திறனுடன் இன்னும் முழுமையாக மாற்றியமைக்கப்படாத வலைத்தளங்களின் விஷயமாக இருந்தால், பின்வருபவை எங்களிடம் உள்ளன:

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

சாத்தியமான விளைவுகள்

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

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

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

வியூபோர்ட் குறிச்சொல்லின் விருப்பம் 2 ஐத் தேர்ந்தெடுப்பதன் விளைவுகளைப் பார்க்கும்போது, ​​விருப்பம் 1 மிகவும் பரிந்துரைக்கப்படுகிறது. இந்த வழியில், பக்கத்தின் தலையில் விருப்பம் 1 என மேலே சுட்டிக்காட்டப்பட்ட காட்சிப் போர்ட்டைப் பயன்படுத்தும் போது, ​​மொபைலே தன்னால் இயன்ற தெளிவுத்திறனைக் காட்ட அனுமதிக்கப்படுகிறது.

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

நெடுவரிசைகளை அகற்றுதல்

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

-நெடுவரிசைகள் ஏற்கனவே Html இல் ஆர்டர் செய்யப்பட்டுள்ளன: இது அப்படியானால், அவை ஏற்கனவே மொபைலுக்கு விரும்பிய வழியில் வழங்கப்படுகின்றன. மிதவைகளை மறையச் செய்வது அல்லது டிஸ்பிளே:இன்லைன்-பிளாக் அல்லது டிஸ்ப்ளே:பாக்ஸை மாற்றியமைப்பது மட்டுமே தேவைப்படும், அதை சாதாரண டிஸ்ப்ளே:பிளாக் மூலம் மாற்ற வேண்டும். பின்வரும் தொடரியல் பயன்படுத்துவதன் மூலம்:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 400px) {

#உள்ளடக்கம் {காட்சி:தடுப்பு; மிதவை: எதுவுமில்லை; }

}

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

இந்த கட்டமைப்பில், மொபைலில் பக்கப்பட்டி கூறுகள் உள்ளடக்கத்திற்கு முன் அமைந்திருக்க வேண்டும். எனவே CSS இது போல் தெரிகிறது:

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 400px) {

#முக்கிய {நிலை:உறவினர்; அகலம்:100%; }

#content{margin-top:80px; அகலம்:100%; மிதவை: எதுவுமில்லை;}

#பக்கப்பட்டி{உயரம்:80px; நிலை: முழுமையான; மேல்:0; அகலம்:100%; மிதவை: எதுவுமில்லை; }

}

மொபைல் பதிப்பில் முழுமையான நிலைகள் பயன்படுத்தப்பட வேண்டிய இரண்டாவது காட்சியைக் காட்சிப்படுத்த, பின்வரும் கட்டமைப்பு உதாரணம் வழங்கப்படுகிறது

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 450px) {

#முக்கிய #பக்கப்பட்டி {காட்சி:தடுப்பு; மிதவை: எதுவுமில்லை !முக்கியம்; அகலம்:100%; நிலை: முழுமையான; மேல்:-80px; விளிம்பு:0 !முக்கியம்; எல்லை-கீழ்:1px திட #aaa; திணிப்பு:0 0 20px 0;}

#முக்கிய #உள்ளடக்கம் { மிதவை: எதுவுமில்லை; அகலம்: ஆட்டோ; விளிம்பு:100px 0 0 0; }

}

இந்த வழக்கில் மொபைல் பதிப்பில் 450 பிக்சல்கள் அகலத்திற்கு மாற்றமும் உள்ளது.

எழுத்துருக்களை சரிசெய்தல்

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

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

  #தலைப்பு உல்.மெனு லி,

#தலைப்பு ul.menu li.analytics,

#தலைப்பு ul.menu li.development {பின்னணி:none;}

#header ul.menu li h4 {margin:30px 0 0 0px; எழுத்துரு அளவு:12px; உரை உள்தள்ளல்:10%;}

#முக்கிய #உள்ளடக்கம் .hnews h3 a,

#முக்கிய #உள்ளடக்கம் .hnews h1 a{ font-size:22px; }

#முக்கிய #உள்ளடக்கம் .hnews .entry-content {font-size:16px;}

அழகியல் மற்றும் பாணிகளின் அடிப்படையில் மற்ற மாற்றங்கள்

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

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

நீங்கள் இணைய மேம்பாட்டின் அடிப்படையில் மட்டும் வடிவமைக்கும் போது, ​​ஆனால் ஏதேனும் ஒரு புதிய உருவாக்கம் அல்லது கட்டமைப்பில். ஒரு சோதனை அல்லது சோதனை நிலை உள்ளது, அங்கு நீங்கள் முடிவுகளைச் சரிபார்க்கலாம், அவை உகந்ததாக இருந்தால் அல்லது மேம்பாடுகள் தேவைப்பட்டால்.

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

உலாவியில் சோதனைக்குச் செல்லவும்

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

• உலாவியின் அகலத்தை சோதிப்பதற்காக அதன் பெரிதாக்குதலை அகற்றுவதன் மூலம் நேரலையில் செயல்படவும்.
• இந்த சோதனை அமைப்புகளை எளிய கட்டளைகளுடன் செயல்படுத்த, ISH போன்றவற்றை ஒரு பயனுள்ள கருவியாக பயன்படுத்தவும்.

மொபைல் கேச் பைபாஸ்

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

• Css அழைப்பில் உள்ள மாறிகளுடன் வேலை செய்யுங்கள்:

"/styles.css?version=xxxx"

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

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

இந்த செயல்களால், சந்தேகத்திற்கு இடமின்றி, சோதனைகளை மேற்கொள்ளும்போது மிகவும் நடைமுறை மற்றும் வசதியான முடிவு கிடைக்கும்.

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

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

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

சாத்தியமான விளைவுகள் அல்லது பிழைகள்

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

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

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

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

இறுதியாக பதிலளிக்கக்கூடிய வடிவமைப்பு பற்றி

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

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

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

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

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

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