டெயில்விண்ட் CSS இல் உள்ள வரிசை கட்டத்தில் பிரேக் பாயின்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்துவதற்கான முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.
டெயில்விண்டில் ரோ கிரிட்டில் பிரேக் பாயிண்ட் மற்றும் மீடியா வினவல்களை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்டில் உள்ள வரிசை கட்டத்தில் பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்த, ஒரு HTML நிரலை உருவாக்கவும். பின்னர், '' ஐப் பயன்படுத்தி பல்வேறு திரை அளவுகளுக்கான வரிசைகளின் எண்ணிக்கையை வரையறுக்கவும் sm ”,” எம்.டி ' அல்லது ' lg 'முறிவு புள்ளிகள்' கட்டம்-வரிசைகள்-<மதிப்பு> 'பயன்பாடுகள். அடுத்து, திரையின் அளவை சரிசெய்வதன் மூலம் வலைப்பக்கத்தில் மாற்றங்களை உறுதிப்படுத்தவும்.
நடைமுறைச் செயலாக்கத்தை ஆராய்வோம்:
படி 1: HTML திட்டத்தில் வரிசை கட்டத்துடன் பிரேக் பாயிண்ட் மற்றும் மீடியா வினவல்களைப் பயன்படுத்தவும்
ஒரு HTML நிரலை உருவாக்கி, வெவ்வேறு திரை அளவுகளுக்கான வரிசைகளின் எண்ணிக்கையை ' கட்டம்-வரிசைகள்-<மதிப்பு> ” பயன்பாடு. உதாரணமாக, நாங்கள் பயன்படுத்தினோம் ' எம்.டி 'முறிவு புள்ளி' கட்டம்-வரிசைகள்-3 'பயன்பாட்டு மற்றும்' lg 'முறிவு புள்ளிகள்' கட்டம்-வரிசைகள்-5 பல்வேறு திரை அளவுகளில் வரிசைகளின் எண்ணிக்கையை மாற்றுவதற்கான பயன்பாடுகள்:
< உடல் >
< div வர்க்கம் = 'கிரிட் கிரிட்-ரோஸ்-2 எம்டி:கிரிட்-ரோஸ்-3 எல்ஜி:கிரிட்-ரோஸ்-5 கிரிட்-ஃப்ளோ-கோல் இடைவெளி-3 மீ-3 உரை-மையம்' >
< div வர்க்கம் = 'bg-teal-500 p-5' > 1 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 2 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 3 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 4 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 5 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 6 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 7 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 8 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 9 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / உடல் >
இங்கே:
- ' கட்டம் 'வகுப்பு ஒரு கட்ட அமைப்பை உருவாக்க பயன்படுத்தப்படுகிறது.
- ' கட்டம்-வரிசைகள்-2 ” வகுப்பானது கட்டம் 2 சம அளவிலான வரிசைகளைக் கொண்டிருக்க வேண்டும் என்று குறிப்பிடுகிறது.
- ' md:கிரிட்-வரிசைகள்-3 ” வகுப்பு நடுத்தர திரை அளவில் கட்டத்தை 3 சம அளவிலான வரிசைகளாக மாற்றுகிறது.
- ' lg:கிரிட்-வரிசைகள்-5 ”வகுப்பு பெரிய திரை அளவில் கட்டத்தை 5 சம அளவிலான வரிசைகளாக மாற்றுகிறது.
- ' கட்டம்-ஓட்டம்-கோல் 'வகுப்பு கட்டம் உருப்படிகளை நெடுவரிசைகளில் கிடைமட்டமாக வைக்கிறது.
- ' இடைவெளி-3 ” வகுப்பு ஒவ்வொரு கட்ட உருப்படிக்கும் இடையே 3 அலகுகள் இடைவெளியை அமைக்கிறது.
- ' மீ-3 ” வகுப்பானது கட்டம் கொள்கலனைச் சுற்றி 3 அலகுகளின் விளிம்பைப் பயன்படுத்துகிறது.
- ' உரை மையம் ” வகுப்பு ஒவ்வொரு கட்டம் உருப்படியின் உரையை மையமாக அமைக்கிறது.
- ' bg-teal-500 ” வகுப்பு டீல் நிறத்தை கட்டம் உருப்படிகளின் பின்னணியில் அமைக்கிறது.
- ' ப-5 ” வகுப்பானது குழந்தையின் உள்ளே இருக்கும் உள்ளடக்கத்தில் 5 அலகுகளின் திணிப்பைச் சேர்க்கிறது
பொருட்களை.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
வரிசை கட்டத்தில் பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்கள் பயன்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்த, திரை அளவை மாற்றுவதன் மூலம் HTML வலைப்பக்கத்தைப் பார்க்கவும்:
மேலே உள்ள வெளியீட்டில், திரையின் அளவுடன் வரிசைகளின் எண்ணிக்கை மாறுவதைக் காணலாம். வரிசை கட்டத்தில் பிரேக் பாயிண்ட்களும் மீடியா வினவல்களும் வெற்றிகரமாகப் பயன்படுத்தப்பட்டதை இது குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் உள்ள வரிசை கட்டத்தில் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்த, '' ஐப் பயன்படுத்தி பல்வேறு திரை அளவுகளுக்கான வரிசைகளின் எண்ணிக்கையை வரையறுக்கவும் sm ”,” எம்.டி ' அல்லது ' lg 'முறிவு புள்ளிகள்' கட்டம்-வரிசைகள்-<மதிப்பு> 'பயன்பாடுகள். பின்னர், திரையின் அளவை மாற்றுவதன் மூலம் வலைப்பக்கத்தில் மாற்றங்களை உறுதிப்படுத்தவும். இந்தக் கட்டுரை டெயில்விண்ட் CSS இல் வரிசை கட்டத்தின் மீது பிரேக் பாயிண்ட் மற்றும் மீடியா வினவல்களைப் பயன்படுத்துவதற்கான முறையை எடுத்துக்காட்டுகிறது.