இந்தக் கட்டுரையானது டெயில்விண்ட் பிரேக் பாயிண்ட்களில் குறைந்தபட்ச உயரம் மற்றும் அதிகபட்ச உயரத்தைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்கும் மற்றும் பின்வரும் அவுட்லைனைப் பயன்படுத்தி மீடியா வினவல்கள்:
- டெயில்விண்ட் பிரேக் பாயிண்ட்ஸ் மற்றும் மீடியா வினவல்களில் குறைந்தபட்ச உயர சொத்தை அமைத்தல்
- டெயில்விண்ட் பிரேக் பாயிண்ட்ஸ் மற்றும் மீடியா வினவல்களில் அதிகபட்ச உயர சொத்தை அமைத்தல்
டெயில்விண்ட் பிரேக்பாயிண்ட் & மீடியா வினவல்களில் குறைந்தபட்ச உயர சொத்தை எவ்வாறு அமைப்பது?
டெயில்விண்ட் வெவ்வேறு திரை அளவுகளுக்கு வடிவமைப்பை ஏற்புடையதாக மாற்றுவதற்கு இயல்புநிலை பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களை வழங்குகிறது. பிரேக் பாயிண்ட்டுகளுக்கு வழங்கப்பட்ட பண்புகள் குறிப்பிட்ட திரை அளவை எட்டும்போது பயன்படுத்தப்படும். இந்த இயல்புநிலை முறிவுப் புள்ளிகளுக்கான குறைந்தபட்ச அகலம் பின்வருமாறு விவரிக்கப்பட்டுள்ளது:
- எஸ்எம்: குறைந்தபட்ச அகலம் '640px'.
- எம்டி: குறைந்தபட்ச அகலம் '768px'.
- lg: குறைந்தபட்ச அகலம் '1024px'.
- xl: குறைந்தபட்ச அகலம் '1280px'.
- 2xl: குறைந்தபட்ச அகலம் '1536px'.
குறைந்தபட்ச உயர பண்பு ஒரு தனிமத்தின் உயரத்திற்கான குறைந்த வரம்பை அமைக்கிறது. இதன் பொருள் ஒரு உறுப்பு வைத்திருக்க அனுமதிக்கப்படும் குறைந்தபட்ச உயரத்தை இது குறிப்பிடுகிறது. டெயில்விண்டில் உள்ள பிரேக் பாயிண்ட்களுடன் குறைந்தபட்ச உயர சொத்தைப் பயன்படுத்த, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது:
< div வர்க்கம் = '{பிரேக்பாயிண்ட் முன்னொட்டு}:min-h-{value}...' > < / div >
ஒரு சிறந்த புரிதலைப் பெற, மேலே வரையறுக்கப்பட்ட தொடரியல் விளக்கத்தைப் பயன்படுத்துவோம். இந்த எடுத்துக்காட்டில், உறுப்புக்கான குறைந்தபட்ச உயர வரம்பு ' எம்டி ” முறிவு புள்ளி. இது தனிமத்தின் ஒட்டுமொத்த உயரத்தை அதிகரிக்கும்.
< div வர்க்கம் = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > திரையை அதிகரிக்கவும் அளவு குறைந்தபட்ச உயரத்தை அதிகரிக்க < / div >
மேலே உள்ள குறியீட்டிற்கான விளக்கம் பின்வருமாறு:
- ' h-48 'வகுப்பு div உறுப்புக்கு 192px உயரத்தை வழங்குகிறது.
- ' w-48 'வகுப்பு div உறுப்புக்கு 192px உயரத்தை வழங்குகிறது.
- ' வட்டமான-எம்.டி ” class ஆனது div உறுப்புக்கு சுற்று மூலையை வழங்குகிறது.
- ' bg-{color}-{number} ” class ஆனது div உறுப்பின் பின்னணியில் குறிப்பிட்ட வண்ணத்தை வழங்குகிறது.
- ' உரை மையம் 'வகுப்பு உரை உறுப்பை div உறுப்பின் மையத்தில் நிலைநிறுத்துகிறது.
- ' md:min-h-screen ” வகுப்பு குறைந்தபட்ச உயர வரம்பை 100% திரை உயரத்திற்கு சமமாக அதிகரிக்கும்.
வெளியீடு:
அதை வெளியீட்டில் காணலாம், ' எம்டி ” திரை அளவு பூர்த்தியானது, உறுப்பு திரை உயரத்தின் 100% பெறும். இதற்குக் குறைந்தபட்ச உயர வரம்பு ' எம்டி 'பிரேக் பாயிண்ட் திரை உயரத்திற்கு சமமாக அமைக்கப்பட்டுள்ளது:
டெயில்விண்ட் பிரேக் பாயிண்ட் & மீடியா வினவல்களில் அதிகபட்ச உயர சொத்தை எவ்வாறு அமைப்பது?
அதிகபட்ச உயர வகுப்பு டெயில்விண்டில் உள்ள உயரப் பண்புக்கான மேல் வரம்பை அமைக்கிறது. இதன் பொருள் ஒரு உறுப்பு வைத்திருக்கக்கூடிய அதிகபட்ச உயரத்தை இது குறிப்பிடுகிறது. பிரேக் பாயிண்ட்களுடன் குறைந்தபட்ச உயர வகுப்பைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:
< div வர்க்கம் = '{பிரேக்பாயிண்ட் முன்னொட்டு}:max-h-{size}...' > < / div >ஒரு சிறந்த புரிதலைப் பெற, மேலே வரையறுக்கப்பட்ட தொடரியல் விளக்கத்தைப் பயன்படுத்துவோம். இந்த எடுத்துக்காட்டில், உறுப்புக்கு ஒரு குறிப்பிட்ட அதிகபட்ச உயர வரம்பு வழங்கப்படும் ' எம்டி ” முறிவு புள்ளி. இது உறுப்புக்கு வழங்கப்படும் இயல்புநிலை உயரத்தைக் குறைக்கும்.
< div வர்க்கம் = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > திரையை அதிகரிக்கவும் அளவு குறைந்தபட்ச உயரத்தை அதிகரிக்க < / div >மேலே உள்ள குறியீட்டில், ஒரு தனிமத்தின் இயல்புநிலை உயரம் 'h-96' அதாவது 384px உடன் வழங்கப்பட்டுள்ளது என்பதை நினைவில் கொள்ளவும். இருப்பினும், 'md' முறிவுப் புள்ளியை சந்திக்கும் போது இந்த உயரம் '240px' ஆகக் குறைகிறது. இதற்குக் காரணம் ' md:max-h-60 ' வர்க்கம்.
வெளியீடு:
கீழே உள்ள வெளியீட்டில், திரையின் அளவு 'ஐ அடைந்தவுடன் தெளிவாகக் காணலாம். எம்டி 'பிரேக் பாயிண்ட், தனிமத்தின் உறுப்பு உயரம் சிறியதாகிறது.
டெயில்விண்ட் பிரேக் பாயிண்ட்களுடன் குறைந்தபட்ச மற்றும் அதிகபட்ச உயரத்தை அமைப்பது தான்.
முடிவுரை
டெயில்விண்ட் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்கள் மூலம் அதிகபட்ச உயரத்தை அமைக்க, ' {பிரேக்பாயிண்ட் முன்னொட்டு}:max-h-{size} 'வகுப்பு பயன்படுத்தப்படுகிறது. இதேபோல், டெயில்விண்ட் பிரேக் பாயிண்ட்களுடன் குறைந்தபட்ச உயரத்தை அமைக்க, ' {breakpoint முன்னொட்டு}:min-h-{size} 'வகுப்பு பயன்படுத்தப்படுகிறது. இந்தக் கட்டுரையில் டெயில்விண்டில் உள்ள பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களுக்கு குறைந்தபட்ச மற்றும் அதிகபட்ச உயர பண்புகளைப் பயன்படுத்துவதற்கான செயல்முறையை வழங்கியுள்ளது.