பதிலளிக்கக்கூடிய இணையதளத்தை வடிவமைக்கும் போது, டெயில்விண்ட் ' முறிவு புள்ளிகள் 'மற்றும்' ஊடக கேள்விகள் ” பல்வேறு திரை அளவுகளுக்கு வசதியாக மாற்றியமைக்கக்கூடிய பல செயல்பாடுகளைப் பயன்படுத்துவதில் முக்கிய பங்கு வகிக்கிறது. இந்த அம்சங்கள் பல்வேறு வகுப்புகள் மூலம் குறிப்பிடப்பட வேண்டும், அதாவது, ' md (நடுத்தர அளவிலான திரைகள்)”, “lg(பெரிய அளவிலான திரை)” அல்லது “@media வழியாக 'குறிப்பிட்ட நிபந்தனையின் அடிப்படையில் செயல்பாடுகளைச் சேர்க்கும் விதி.
இந்த கட்டுரை பின்வரும் உள்ளடக்கத்தை உள்ளடக்கியது:
- டெயில்விண்ட் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துவது எப்படி?
- டெயில்விண்ட் பிரேக் பாயிண்ட்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துதல்.
- டெயில்விண்ட் மீடியா வினவல்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துதல்.
டெயில்விண்ட் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துவது எப்படி?
' உரை அலங்காரம் தடிமன் 'இன் உதவியுடன் விண்ணப்பிக்கலாம்' உரை-அலங்காரம்-தடிமன் பிக்சல்களில் இலக்கு தடிமன் மதிப்பைத் தொடர்ந்து பண்பு. இந்த பிக்சல்கள் ' 1px', '2px', '4px' அல்லது '8px ”. ' முறிவு புள்ளிகள் 'ஐப் பயன்படுத்தி பயனரின் திரை அளவிற்கு ஏற்ப பல்வேறு பயன்பாட்டு செயல்பாடுகளை மாற்றியமைக்க பயன்படுத்தப்படுகிறது. md (நடுத்தர அளவிலான திரைகள்)', 'lg(பெரிய அளவிலான திரை) வகுப்புகள், முதலியன ஊடக கேள்விகள் '@ வழியாக உலாவி மற்றும் OS அளவுருக்களின் தொகுப்பின் அடிப்படையில் நிபந்தனை செயல்படுத்தல் பாணிகளை இயக்கவும் ஊடகம் ” விதி.
எடுத்துக்காட்டு 1: டெயில்விண்ட் பிரேக் பாயிண்ட்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டு, திரையின் அளவுகளுக்கு ஏற்ப மாறுபடும் பாணியைப் பயன்படுத்த, வெவ்வேறு புள்ளிகளில் உரை அலங்காரத்தின் தடிமன் அமைக்கிறது:
< html >
< தலை >
< மெட்டா எழுத்துக்குறி = 'utf-8' >
< மெட்டா பெயர் = 'வியூபோர்ட்' உள்ளடக்கம் = 'அகலம்=சாதன அகலம், ஆரம்ப அளவு=1' >
< தலைப்பு >< / தலைப்பு >
< கையால் எழுதப்பட்ட தாள் src = 'https://cdn.tailwindcss.com' >< / கையால் எழுதப்பட்ட தாள் >
< / தலை >
< உடல் >
< உரைப்பகுதி வர்க்கம் = 'அண்டர்லைன் எம்டி: அலங்காரம்-8 எல்ஜி: பெட்டி-அலங்கார-துண்டு உரை-கருப்பு உரை-2xl' ஐடி = 'வெப்பநிலை' > இது Linuxhint < / உரைப்பகுதி >
< / உடல் >
< / html >
இந்த குறியீடு துணுக்கின் படி, கீழே கொடுக்கப்பட்டுள்ள படிகளைப் பயன்படுத்தவும்:
- முதலில், டெயில்விண்ட் செயல்பாடுகளைப் பயன்படுத்த CDN பாதையைச் சேர்க்கவும்.
- பின்னர், ஒரு '< உரைப்பகுதி >” உறுப்பு மற்றும் இயல்புநிலை மற்றும் நடுத்தர திரைகளில் கூறப்பட்ட உரை அலங்கார தடிமன் நிலைகளை இணைத்து “ எம்.டி ” வகுப்பு, முறையே.
- ' உரை-கருப்பு 'மற்றும்' உரை-2xl ” வகுப்புகள் வண்ணம் (கருப்பு) மற்றும் எழுத்துரு அளவு அதாவது 2xl ஆகியவற்றை முறையே உரைக்கு ஒதுக்குகின்றன.
வெளியீடு
இந்த முடிவிலிருந்து, உரை-அலங்காரத் தடிமன் வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு மாற்றியமைக்கப்பட்டுள்ளது என்பதைக் குறிக்கலாம்.
எடுத்துக்காட்டு 2: டெயில்விண்ட் மீடியா வினவல்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துதல்
'@ ஊடகம் ” விதி பல்வேறு ஊடக வகைகள்/சாதனங்களுக்கு பல்வேறு பாணிகளை செயல்படுத்த ஊடக வினவல்களில் பயன்படுத்தப்படுகிறது. குறிப்பிட்ட அளவுரு/நிபந்தனையின் அடிப்படையில் உரை தடிமனை அலங்கரிக்க இந்த குறிப்பிட்ட ஆர்ப்பாட்டம் இந்த மீடியா வினவல்களைப் பயன்படுத்துகிறது:
< html >
< தலை >
< மெட்டா எழுத்துக்குறி = 'utf-8' >
< மெட்டா பெயர் = 'வியூபோர்ட்' உள்ளடக்கம் = 'அகலம்=சாதன அகலம், ஆரம்ப அளவு=1' >
< தலைப்பு >< / தலைப்பு >
< கையால் எழுதப்பட்ட தாள் src = 'https://cdn.tailwindcss.com' >< / கையால் எழுதப்பட்ட தாள் >
< / தலை >
< உடல் >
< h1 ஐடி = 'வெப்பநிலை' > இது Linuxhint< / h1 >
< / உடல் >
< / html >
< பாணி வகை = 'உரை/சிஎஸ்எஸ்' >
#வெப்பநிலை {
உரை-அலங்காரம்: அடிக்கோடு;
உரை- சீரமைக்க : மையம்;
}
@ ஊடகம் ( அதிகபட்சம்- அகலம் :550px ) {
#வெப்பநிலை {
உரை-அலங்கார-தடிமன்: 4px;
} }
< / பாணி >
இந்தக் குறியீட்டுத் தொகுதியில், கீழே கொடுக்கப்பட்டுள்ள வழிமுறைகளைக் கவனியுங்கள்:
- அதேபோல், CDN பாதையையும் சேர்க்கவும்.
- பின்னர், '<' சேர்க்கவும் h1 குறிப்பிடப்பட்ட 'ஐடி' கொண்ட உறுப்பு.
- குறியீட்டின் CSS பகுதியில், “<க்குள் பாணி >” டேக், ஸ்டைல் உள்ளிட்ட தலைப்பு.
- மேலும், '@' ஐ உருவாக்கவும் ஊடகம் 'திரையின் அகலம் இருக்கும் வரை நிபந்தனையைப் பயன்படுத்துகிறது' 550px ', உரை-அலங்கார-தடிமன்' என அமைக்கப்பட்டுள்ளது 4 ”பிக்சல்கள்.
- திரையின் அகலம் இந்த வரம்பை மீறிய பிறகு, உரை வெறுமனே அடிக்கோடிடப்படும்.
வெளியீடு
இந்த முடிவு, “@media” விதி, அதாவது, திரையின் அகலத்திற்கு ஏற்ப மீடியா வினவல்கள் பயன்படுத்தப்படுவதைக் குறிக்கிறது.
முடிவுரை
பிரேக் பாயிண்ட்ஸ் மற்றும் மீடியா வினவல்களை உரை அலங்காரம் தடிமனாக பயன்படுத்தி பயனரின் திரை அளவிற்கு ஏற்ப பயன்படுத்தப்படும் செயல்பாடுகளை பல்வேறு வகுப்புகளைப் பயன்படுத்திக் காட்டலாம். எம்டி', 'எல்ஜி ” அல்லது “@ வழியாக ஊடகம் ” விதி, முறையே. பிந்தைய அணுகுமுறை ' CSS 'குறியீடு இலக்கு உறுப்பைத் தூண்டுகிறது மற்றும் செட் அளவுரு/நிலையின் அடிப்படையில் அதை அலங்கரிக்கிறது. இந்த வழிகாட்டி டெயில்விண்ட் பிரேக்பாயிண்ட் மற்றும் மீடியா வினவல்களுடன் உரை அலங்கார தடிமனைப் பயன்படுத்துவதை விரிவாகக் காட்டுகிறது.