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

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

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

---

---

மீடியா வினவல்களைப் பயன்படுத்துவது உங்கள் வலைத்தளம்/வலை பயன்பாடு ஒவ்வொரு சாதனத்திலும் நீங்கள் விரும்பும் விதத்தில் தோன்றுவதை உறுதி செய்வதற்கான சிறந்த வழியாகும்.

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

சுருக்கமாக, பதிலளிக்கக்கூடிய வடிவமைப்பு பல்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ஒரு வலைத்தளம்/வலை பயன்பாட்டு அமைப்பை உருவாக்க HTML/CSS ஐப் பயன்படுத்துகிறது. HTML/CSS இல் ஒரு வலைத்தள வடிவமைப்பில் பதிலளிக்க சில வழிகள் உள்ளன:

• பிக்சல்களுக்கு பதிலாக ரெம் மற்றும் எம் அலகுகளைப் பயன்படுத்துதல் (px)
• ஒவ்வொரு வலைப்பக்கத்தின் வியூ போர்ட்/ஸ்கேலை அமைத்தல்
• ஊடக வினவல்களைப் பயன்படுத்துதல்

ஊடக வினவல்கள் என்றால் என்ன?

மீடியா வினவல் என்பது CSS3 பதிப்பில் வெளியிடப்பட்ட CSS இன் அம்சமாகும். இந்த புதிய அம்சத்தின் அறிமுகத்துடன் CSS இன் பயனர்கள் ஒரு சாதனம்/திரை உயரம், அகலம் மற்றும் நோக்குநிலை (நிலப்பரப்பு அல்லது உருவப்படம்) அடிப்படையில் ஒரு வலைப்பக்கத்தின் காட்சியை சரிசெய்யும் திறனைப் பெறுகின்றனர்.

மேலும் படிக்க: அத்தியாவசிய CSS3 பண்புகள் ஏமாற்று தாள்

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

---

---

ஊடக வினவல்களைப் பயன்படுத்துதல்

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

ஊடக வினவல்களின் அமைப்பு

மீடியா வினவல் கட்டமைப்பின் எடுத்துக்காட்டு


@media only/not media-type and (expression){
/*CSS code*/
}

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

---

---

• @மீடியா முக்கிய சொல்
• இல்லை/ஒரே முக்கிய சொல்
• ஒரு ஊடக வகை (இது திரை, அச்சு அல்லது பேச்சு ஆகியவையாக இருக்கலாம்)
• முக்கிய சொல் மற்றும்
• அடைப்புக்குறிக்குள் இணைக்கப்பட்ட ஒரு தனித்துவமான வெளிப்பாடு
• CSS குறியீடு ஒரு ஜோடி திறந்த மற்றும் நெருக்கமான சுருள் பிரேஸ்களுடன் இணைக்கப்பட்டுள்ளது.

தொடர்புடையது: அச்சிடுவதற்கு ஆவணங்களை வடிவமைக்க CSS ஐப் பயன்படுத்துதல்

ஒரே முக்கிய வார்த்தையுடன் ஒரு மீடியா வினவலின் உதாரணம்


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

மேலே உள்ள உதாரணம் 450px மற்றும் அதற்கும் குறைவான அகலம் கொண்ட சாதனத் திரைகளுக்கு மட்டுமே CSS ஸ்டைலிங் (குறிப்பாக நீல பின்னணி நிறம்) பொருந்தும் - எனவே அடிப்படையில் ஸ்மார்ட்போன்கள். ஒரே முக்கிய சொல்லை முக்கிய வார்த்தையால் மாற்ற முடியாது, பின்னர் மேலே உள்ள ஊடக வினவலில் CSS ஸ்டைலிங் அச்சு மற்றும் பேச்சுக்கு மட்டுமே பொருந்தும்.

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

இயல்புநிலை மீடியா வினவல் உதாரணம்


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

மீடியா வினவல்களின் இடம்

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

உள் முறையானது HTML கோப்பின் டேக்கில் டேக்கைச் சேர்ப்பதும், டேக் அளவுருக்களுக்குள் மீடியா வினவலை உருவாக்குவதும் அடங்கும்.

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

ஊடக வினவல்களின் வரம்பு

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

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

டேப்லெட் மீடியா வினவல் உதாரணம்


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}


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

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

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

டேப்லெட் மீடியா வினவல் வரம்பு எடுத்துக்காட்டு


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}


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

மீடியா வினவல்களை இணைக்கவும்

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

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

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




href='tablet.css'>




மேலே உள்ள குறியீடு உங்கள் HTML கோப்பின் டேக்கில் வைக்கப்பட வேண்டும். இப்போது நீங்கள் செய்ய வேண்டியது main.css, tablet.css, மற்றும் smartphone.css ஆகிய கோப்பு பெயர்களுடன் மூன்று தனித்தனி CSS கோப்புகளை உருவாக்க வேண்டும் - பின்னர் ஒவ்வொரு சாதனத்திற்கும் நீங்கள் விரும்பும் குறிப்பிட்ட வடிவமைப்பை உருவாக்கவும்.

பிரதான கோப்பில் உள்ள பாணி 800px க்கும் அதிகமான அகலம் கொண்ட அனைத்து திரைகளுக்கும் பொருந்தும், டேப்லெட் கோப்பில் உள்ள பாணி 450px மற்றும் 801px க்கு இடையில் அகலம் கொண்ட அனைத்து திரைகளுக்கும் பொருந்தும், மேலும் ஸ்மார்ட்போன் கோப்பில் உள்ள பாணி கீழே உள்ள அனைத்து திரைகளுக்கும் பொருந்தும் 451px

அமேசான் தொகுப்பு வழங்கப்பட்டது ஆனால் இல்லை என்று கூறுகிறது

பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்க இப்போது உங்களிடம் கருவிகள் உள்ளன

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

படக் கடன்: எதிர்மறை இடம்/ பெக்ஸல்கள்

பகிர் பகிர் ட்வீட் மின்னஞ்சல் CSS இல் பின்னணி படத்தை எப்படி அமைப்பது

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

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

• நிரலாக்க
• இணைய மேம்பாடு
• வலை வடிவமைப்பு
• CSS

எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

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

கதீஷா கீனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்