ஊடக வினவல்களை செயல்படுத்த தேவையான வழிகாட்டுதல்களை இந்த இடுகை குறிப்பிடும்.
மொபைல் சாதனங்களுக்கான மீடியா வினவல்களை எவ்வாறு செயல்படுத்துவது?
ஊடக வினவலை '' என்று குறிப்பிடுவதன் மூலம் மொபைல் சாதனங்களில் பயன்படுத்தலாம் @மீடியா ” குறிச்சொல் மற்றும் சிறிய பிரேஸ்களில் திரையின் அளவைக் குறிப்பிடுகிறது. அந்த மீடியா வினவிற்கான CSS பின்னர் சுருள் பிரேஸ்களுக்குள் சேர்க்கப்படும். திரையின் அளவு பயனரால் குறிப்பிடப்பட்ட அளவை சந்திக்கும் போதெல்லாம், அது கூறப்பட்ட மீடியா வினவலைப் பயன்படுத்தும்.
மொபைல் சாதனங்களுக்கான மீடியா வினவல்களை செயல்படுத்துவதை அறிய ஒரு நடைமுறை உதாரணத்தை மேலோட்டமாக பார்க்கலாம்.
எடுத்துக்காட்டு: மீடியா வினவல்களைப் பயன்படுத்துவதன் மூலம் இரண்டு நெடுவரிசை தளவமைப்பிலிருந்து ஒரு நெடுவரிசை தளவமைப்பிற்கு மாற்றும் தளவமைப்பை உருவாக்கவும்
கீழேயுள்ள எடுத்துக்காட்டில், வலைப்பக்கத்தின் தளவமைப்பு நெடுவரிசை அமைப்பிலிருந்து ஒற்றை-நெடுவரிசை தளவமைப்பிற்கு மாறும்:
படி 1: ஒரு HTML கட்டமைப்பை உருவாக்கவும்
- முதலில், ஒரு HTML கோப்பை உருவாக்கி அதன் வெளிப்புற CSS ஸ்டைல்ஷீட் கோப்பை இணைக்கவும் <தலை> பிரிவு.
- பின்னர், ஒரு உருவாக்கவும் <தலைப்பு> பகுதியைப் பயன்படுத்தி வலைத்தளத்தின் தலைப்பைச் சேர்க்கவும் குறிச்சொல்.
- உருவாக்கு a 'கன்டெய்னர்-கிளாஸ்' என்ற வகுப்புப் பெயரால் மேலும் இரண்டுஅதன் உள்ளே 'என்ற வகுப்புப் பெயர் உள்ளது. நெடுவரிசை ”. < உடல் >
<தலைப்பு>
< h1 > லினக்ஸ் குறிப்பு < / h1 >
< / தலைப்பு>
< div வர்க்கம் = 'கொள்கலன் வகுப்பு' >
< div வர்க்கம் = 'நெடுவரிசை' >
< h2 > பிரிவு ஒன்று < / h2 >
< ப > லினக்ஸ் குறிப்பு சிறந்த மின் கற்றல் தளங்களில் ஒன்றாகும். < / ப >
< / div >
< div வர்க்கம் = 'நெடுவரிசை' >
< h2 > பிரிவு இரண்டு < / h2 >
< ப > லினக்ஸ் குறிப்பு சிறந்த மின் கற்றல் தளங்களில் ஒன்றாகும். < / ப >
< / div >
< / div >
< / உடல் >படி 2: CSSஐப் பயன்படுத்தவும்
உடல் பிரிவில்:- முதலில், '' என்று எழுதுவதன் மூலம் உடல் பகுதியைக் குறிப்பிடவும் உடல் ” குறிச்சொல் மற்றும் சுருள் பிரேஸ்களைக் குறிப்பிடுதல்.
- பிரேஸ்களுக்குள், எழுத்துரு குடும்பம், பின்னணி நிறம், விளிம்பு மற்றும் திணிப்பு ஆகியவற்றைக் குறிப்பிடவும்.
அதன் மேல் <தலைப்பு> பிரிவு:
- உரை நிறம், உரை சீரமைப்பு, பின்னணி நிறம் மற்றும் திணிப்பு ஆகியவற்றைக் குறிப்பிடவும்.
அதன் மேல் 'கொள்கலன் வகுப்பு' பிரிவு:
- அமைக்க ' காட்சி 'சொத்து மதிப்பு' நெகிழ்வு ” Flexbox ஐ உருவாக்க.
- பயன்படுத்த ' நியாயப்படுத்த-உள்ளடக்கம் ” உள்ளடக்கத்திற்கு இடையே இடைவெளி சேர்க்க மற்றும் திணிப்பு சேர்க்க.
நெடுவரிசை வகுப்பில்:
- முதலில், குறிப்பிடப்பட்ட மதிப்பைக் குறிப்பிடவும் ' நெகிழ்வு 'இரண்டு தளவமைப்புப் பிரிவுகளுக்கு இடையே இடைவெளியைச் சேர்க்கும் சொத்து.
- அதன் பிறகு, பின்னணி நிறம், பார்டர், திணிப்பு மற்றும் பெட்டி அளவு ஆகியவற்றைச் சேர்க்கவும்.
படி 3: மீடியா வினவலைப் பயன்படுத்தவும்
- மொபைல் சாதனங்களுக்கு மீடியா வினவலைப் பயன்படுத்த, முதலில், ' @ஊடகங்கள் ” குறிச்சொல்.
- பின்னர், மதிப்பைக் குறிப்பிடவும் ' 768px 'இது மொபைல் சாதனங்களுக்கு பொதுவானது' அதிகபட்ச அகலம் 'சிறிய பிரேஸ்களுக்குள் சொத்து.
- அதன் பிறகு, ' நெடுவரிசை 'மதிப்பு' நெகிழ்வு-திசை 'சொத்து' பொருந்தும் கொள்கலன்-வகுப்பு' வகுப்பு. குறிப்பிட்ட திரை அளவு கண்டறியப்படும் போதெல்லாம் இது இரண்டு நெடுவரிசைகளையும் ஒரு நெடுவரிசையாக மாற்றும்.
- கடைசியாக, CSS ஐப் பயன்படுத்தவும் ' நெடுவரிசை 'வகுப்பு மற்றும் குறிப்பிடவும்' விளிம்பு 'மற்றும்' நெகிழ்வு 'மதிப்புகள்:
எழுத்துரு குடும்பம்: sans-serif;
பின்னணி- நிறம் : வெள்ளி;
விளிம்பு: 0 ;
திணிப்பு: 0 ;
}
தலைப்பு {
பின்னணி- நிறம் : #2f4f4f;
திணிப்பு: 20px;
உரை- சீரமைக்க : மையம்;
நிறம் : வெள்ளை;
}
.கொள்கலன்- வர்க்கம் {
காட்சி: நெகிழ்வு;
நியாயப்படுத்த - உள்ளடக்கம் : இடைவெளி-இடையில்;
திணிப்பு: 20px;
}
.நெடுவரிசை {
நெகிழ்வு: 0 1 கணக்கீடு ( ஐம்பது % - 10px ) ;
எல்லை : 1px திட பச்சை;
பின்னணி - நிறம் : வெள்ளை;
box-sizing: border-box;
திணிப்பு: 20px;
}
@ ஊடகம் ( அதிகபட்சம்- அகலம் : 768px ) {
.கொள்கலன்- வர்க்கம் {
flex-direction: column;
}
.நெடுவரிசை {
நெகிழ்வு: 0 1 100 %;
விளிம்பு-கீழ்: 20px;
}
}வெளியீடு
மீடியா வினவலைப் பயன்படுத்திய பிறகு இணையப் பக்கத்தின் வெளியீடு இங்கே உள்ளது. இந்த வெளியீடு இரண்டு-நெடுவரிசை பதிலளிக்கக்கூடிய தளவமைப்பு:
மொபைலுக்கான மீடியா வினவலைப் பயன்படுத்தி திரை குறிப்பிட்ட பரிமாணங்களைச் சந்திக்கும் போதெல்லாம், அது ஒரு நெடுவரிசை அமைப்பாக மாறும்:
முடிவுரை
மொபைல் சாதனங்களுக்கான மீடியா வினவல்களைச் செயல்படுத்த, முதலில், ' வியூபோர்ட் 'இல்' தலை ”பிரிவு. பின்னர், மொபைல் வடிவமைப்பு சார்ந்த CSS எழுதவும். அதன் பிறகு, “@media” குறிச்சொல்லைப் பயன்படுத்தி, மொபைல் திரையின் அளவைக் குறிப்பிடுவதன் மூலம் மீடியா வினவலைச் சேர்க்கவும். உதாரணமாக, டேப்லெட்டுகளுக்கு 768px மற்றும் மொபைல் போன்களுக்கு 480px என குறிப்பிடவும். மொபைல் சாதனங்களுக்கான மீடியா வினவல்களை செயல்படுத்துவதற்கான செயல்முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.