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

நிமிட அகலம் மற்றும் அதிகபட்ச அகல ஊடக கேள்விகளுக்கு தொடரியல்

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

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

அதிரடி ஊடக மீடியா கேள்விகள்

எனவே, ஒரு வலைத்தளத்தில் மீடியா வினவல்களை எவ்வாறு பயன்படுத்துவீர்கள்? இங்கே ஒரு மிக எளிய உதாரணம்:

1. நீங்கள் எந்த காட்சி பாணியை இலவச (CSS என்ன உள்ளது) ஒரு நன்கு கட்டமைக்கப்பட்ட HTML ஆவணம் தொடங்க வேண்டும்
2. உங்கள் CSS கோப்பில், நீங்கள் வழக்கமாக பக்கம் ஸ்டைலிங் மற்றும் இணையதளத்தில் பார்க்க எப்படி ஒரு அடிப்படை அமைக்க மூலம் தொடங்க வேண்டும். பக்கத்தின் எழுத்துரு அளவு 16 பிக்சல்கள் ஆக வேண்டுமென நீங்கள் விரும்பினால், இந்த CSS ஐ எழுதலாம்: உடல் {font-size: 16px; }
3. இப்பொழுது, பெரிய திரைகளில் அந்த எழுத்துரு அளவை அதிகரிக்க வேண்டும், அதற்கு ஏராளமான ரியல் எஸ்டேட் வசதிகள் உள்ளன. மீடியா வினாக்கள் எடுக்கும் இடத்தில் இது உள்ளது. இது போன்ற ஊடக கேள்வி ஒன்றை தொடங்குவோம்: @ ஊடக திரை மற்றும் (நிமிட அகலம்: 1000px) {}
4. இது மீடியா வினவின் இலக்கணமாகும். இது மீடியா வினாவை நிறுவுவதற்கு @ ஊடகத்தை தொடங்குகிறது. அடுத்து நீங்கள் "ஊடக வகை" ஐ அமைக்கலாம், இது இந்த வழக்கில் "திரை" ஆகும். இது டெஸ்க்டாப் கம்ப்யூட்டர் ஸ்கிரீன், டேப்லெட்ஸ், ஃபோன்கள், முதலியவற்றிற்கு பொருந்துகிறது. இறுதியாக, மீடியா வினவலை "ஊடக அம்சத்துடன்" முடித்து விடுவீர்கள். மேலே உள்ள எடுத்துக்காட்டில், அது "அகலம்: 1000px". அதாவது மீடியா வினவல், குறைந்தபட்சம் 1000 பிக்சல்கள் அகலத்துடன் காட்சிகளைக் காண்பிக்கும்.

1. மீடியா வினவலின் இந்த உறுப்புகளுக்குப் பிறகு, நீங்கள் எந்த சாதாரண CSS விதிமுறையிலும் என்ன செய்ய வேண்டும் என்பதைப் போலவே ஒரு திறப்பு மற்றும் மூடுவது சுருள் பிரேஸ் ஆகியவற்றைச் சேர்க்கவும்.
2. மீடியா கேள்விக்கான கடைசி படி இந்த நிபந்தனை நிறைவேற்றப்பட்டவுடன் நீங்கள் விண்ணப்பிக்க விரும்பும் CSS விதிகள் சேர்க்க வேண்டும். மீடியா வினவலை உருவாக்கும் சுருள் பிரேஸ்களுக்கு இடையே இந்த CSS விதிகளை நீங்கள் சேர்க்கலாம்: @ media screen and (min-width: 1000px) {body {font-size: 20px; }
3. மீடியா வினவலின் நிலைமைகள் (உலாவி சாளரத்தில் குறைந்த பட்சம் 1000 பிக்ஸல் அகலங்கள்) இருக்கும்போது, ​​இந்த CSS பாணி நடைமுறைக்கு வரும், எங்கள் தளத்தின் எழுத்துரு அளவை 16 பிக்சல்களிலிருந்து மாற்றுவோம், முதலில் எங்கள் புதிய மதிப்பு 20 பிக்சல்களுக்கு அமைக்கப்பட்டது.

மேலும் பாங்குகள் சேர்த்தல்

உங்கள் வலைத்தளத்தின் காட்சி தோற்றத்தை சரிசெய்வதற்கு தேவையான இந்த மீடியா வினவலில் பல CSS விதிகளை நீங்கள் வைக்கலாம். உதாரணமாக, நீங்கள் எழுத்துரு-அளவு 20 பிக்சல்களை அதிகரிக்க விரும்பவில்லை எனில், அனைத்து பத்திகளின் நிறத்தையும் கருப்பு (# 000000) மாற்றவும், நீங்கள் இதை சேர்க்கலாம்:

@ ஊடக திரை மற்றும் (நிமிட அகலம்: 1000px) {body {font-size: 20px; } p {color: # 000000; }}

மேலும் மீடியா கேள்விகளுக்கு சேர்த்தல்

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

@ ஊடக திரை மற்றும் (நிமிட அகலம்: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @ ஊடக திரை மற்றும் (நிமிட அகலம்: 1400px) {body {font-size: 24px; }}

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

குறைந்த அகலம் மற்றும் அதிகபட்ச அகலம்

பொதுவாக மீடியா வினவல்களை எழுதுவதற்கு இரண்டு வழிகள் உள்ளன - "min-width" அல்லது "max-width" ஐ பயன்படுத்தி. இதுவரை, நாம் நடவடிக்கை "குறைந்த அகலம்" பார்த்திருக்கிறேன். உலாவி குறைந்தது அந்த குறைந்தபட்ச அகலத்தை அடைந்தவுடன் இது ஊடக கேள்விகளுக்கு அமலாகிறது. உலாவி குறைந்தது 1000 பிக்சல்கள் அகலமாக இருக்கும்போது, ​​"min-width: 1000px" ஐ பயன்படுத்தும் ஒரு வினவலானது பயன்படுத்தப்படும். நீங்கள் ஒரு "மொபைல் முதல்" முறையில் ஒரு தளத்தை உருவாக்கும் போது இந்த ஊடக மீடியா கேள்வி பயன்படுத்தப்படுகிறது.

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

பழைய உலாவிகள் குறித்து

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

1/24/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது