மொபைல்-முதல் பதிலளிக்கக்கூடிய வடிவமைப்பில் கவனம் செலுத்த வழிவகுக்கும் மற்றொரு காரணி என்னவென்றால், பெரும்பாலான மக்கள் தங்கள் மொபைல் சாதனங்கள் வழியாக இணையத்தை அணுகுகிறார்கள், இது 60% ஆகும். 20% மக்கள் மட்டுமே டெஸ்க்டாப்பில் இணையத்தைப் பயன்படுத்துகின்றனர்.
இந்தக் கட்டுரையானது மொபைலில் முதலில் பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்குவதற்கான வழிமுறைகளை உள்ளடக்கும்.
மொபைல்-முதல் பதிலளிக்கக்கூடிய வடிவமைப்பை எவ்வாறு அமைப்பது?
பதிலளிக்கக்கூடிய வடிவமைப்பானது மொபைலில் முதலில் பதிலளிக்கக்கூடியதா அல்லது பெரிய திரைகளுக்கு கீழே கொடுக்கப்பட்டுள்ள முறைகளைப் பின்பற்றி உருவாக்கலாம்:
- மொபைல் முதல் பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்கவும்.
- பெரிய திரைகளுக்குப் பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்க/உருவாக்க மீடியா வினவலைப் பயன்படுத்தவும்/பயன்படுத்தவும்.
முறை 1: மொபைல்-முதல் பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்கவும்
முதலில், மொபைல் முதல் வடிவமைப்பு அணுகுமுறையை உருவாக்கத் தொடங்குங்கள். அந்த நோக்கத்திற்காக, கீழே கொடுக்கப்பட்டுள்ள படிப்படியான வழிமுறைகளைப் பார்க்கவும்.
படி 1: ஒரு HTML கட்டமைப்பை உருவாக்கவும்
முதலில், ஒரு HTML கட்டமைப்பை உருவாக்கி, '' பூட்ஸ்ட்ராப் ” இல் <தலை> பிரிவு. HTML பிரிவில் ஸ்டைல்ஷீட்டைச் சேர்ப்பதை அறிய இதை கிளிக் செய்யவும் இணைப்பு . உள்ளிட்ட அடிப்படை இணையதள கட்டமைப்பை உருவாக்கிய பிறகு, <இல்லை> , <தலைப்பு> மற்றும் <அடிக்குறி> கீழே வழங்கப்பட்டுள்ளபடி:
< உடல் ><தலைப்பு>
<இல்லை>
< உல் >
< அந்த >< அ href = '#' > வீடு < / அ >< / அந்த >
< அந்த >< அ href = '#' > எங்களை பற்றி < / அ >< / அந்த >
< அந்த >< அ href = '#' > எங்கள் சேவைகள் < / அ >< / அந்த >
< அந்த >< அ href = '#' > எங்களை தொடர்பு கொள்ள < / அ >< / அந்த >
< / உல் >
< / இல்லை>
< / தலைப்பு>
<முக்கிய>
< h1 > லினக்ஸ் குறிப்புக்கு வரவேற்கிறோம் < / h1 >
< ப > ஒரு பயிற்சி இணையதளம். < / ப >
< / பிரிவு>
< / முக்கிய>
<அடிக்குறி>
< ப > லினக்ஸ் குறிப்பு காப்புரிமை < / ப >
< / அடிக்குறிப்பு>
< / உடல் >
படி 2: CSSஐப் பயன்படுத்தவும்
உடல் பிரிவில், அமைக்கவும் எழுத்துரு குடும்பம் ” முதல் ” சான்ஸ் செரிஃப் ”. திணிப்பு, விளிம்பு மற்றும் பின்னணி வண்ணத்தையும் அமைக்கவும். அதன் பிறகு தலைப்பு, அடிக்குறிப்பு மற்றும் வழிசெலுத்தலில் CSS ஐப் பயன்படுத்தவும்:
உடல் {எழுத்துரு குடும்பம் : சான்ஸ் செரிஃப் ;
விளிம்பு : 0 ;
திணிப்பு : 0 ;
பின்னணி நிறம் : #808080 ;
}
தலைப்பு {
பின்னணி நிறம் : ஊதா ;
நிறம் : வெள்ளை ;
திணிப்பு : 8px ;
}
நவ் உல் {
பட்டியல்-பாணி-வகை : எதுவும் இல்லை ;
திணிப்பு : 0 ;
விளிம்பு : 0 ;
}
அவர்களின் கப்பல் {
விளிம்பு : 4px 0 ;
}
நவ் உல் லி ஏ {
நிறம் : வெள்ளை ;
உரை-அலங்காரம் : எதுவும் இல்லை ;
}
முக்கிய {
திணிப்பு : 18px ;
}
அடிக்குறிப்பு {
பின்னணி நிறம் : இளஞ்சிவப்பு ;
நிறம் : வெள்ளை ;
உரை-சீரமைப்பு : மையம் ;
திணிப்பு : 8px ;
}
கவனிக்கக்கூடியது போல, வடிவமைப்பு மொபைலுக்கு முதலில் பதிலளிக்கக்கூடியது என்பதை கீழே உள்ள வெளியீடு உறுதிப்படுத்தியுள்ளது:
முறை 2: பெரிய திரைகளுக்கு பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்க மீடியா வினவல்களைப் பயன்படுத்தவும்
டேப்லெட்டுகள் மற்றும் டெஸ்க்டாப்புகள் போன்ற பெரிய திரைகளுக்கும் மேலே உள்ள வடிவமைப்பு உருவாக்கப்படலாம். அந்த நோக்கத்திற்காக, பயனர்கள் மீடியா வினவலை CSS இல் சேர்க்க வேண்டும். மாத்திரைகளுக்கான அகலம் ' 786px 'மற்றும் டெஸ்க்டாப்புகளுக்கு' 1024px ”.
ஊடக வினவல்களைப் பயன்படுத்த, முதலில், ' @மீடியா CSS கோப்பில் 'குறிச்சொல். அதன் பிறகு, 'குறைந்த அகலம்' சொத்தை '' எனக் குறிப்பிடவும் 768px ”. அதாவது, குறைந்தபட்ச திரை அளவு “768px” அல்லது அதற்கு மேல் இருக்கும் போது, பின்வரும் CSS பொருந்தும்:
@மீடியா ( நிமிட அகலம் : 768px ) {உடல் {
எழுத்துரு அளவு : 14px ;
}
தலைப்பு {
திணிப்பு : 18px ;
}
நவ் உல் {
காட்சி : நெகிழ்வு ;
}
அவர்களின் கப்பல் {
விளிம்பு : 0 8px ;
}
முக்கிய {
காட்சி : நெகிழ்வு ;
நியாயப்படுத்த-உள்ளடக்கம் : இடைவெளி-இடையில் ;
align-பொருட்கள் : மையம் ;
}
அடிக்குறிப்பு {
திணிப்பு : 18px ;
}
}
பெரிய திரைகளிலும் வடிவமைப்பு பதிலளிக்கக்கூடியது என்பதை கீழே உள்ள வெளியீடு நிரூபித்தது:
முடிவுரை
மொபைலில் முதலில் பதிலளிக்கக்கூடிய வடிவமைப்பை அமைக்க, முதலில், ஒரு HTML கட்டமைப்பை உருவாக்கி, வியூபோர்ட்டைச் சேர்க்கவும். அதன் பிறகு ஹெட் டேக்கில் CSS கோப்பை இணைக்கவும். பின்னர், மொபைல்-முதல் பதிலளிக்கக்கூடிய வடிவமைப்பின் அடிப்படையில் CSS ஐப் பயன்படுத்தவும். மேலும், மொபைல் சாதனத்தில் சரிசெய்ய CSS மீடியா வினவலை பயனர்கள் சேர்க்கலாம். இந்த எழுதுதல் மொபைல்-முதல் பதிலளிக்கக்கூடிய வடிவமைப்பை அமைப்பதற்கான விரிவான செயல்முறையை நிரூபித்துள்ளது.