டெயில்விண்ட் CSS பல்வேறு சலுகைகளை வழங்குகிறது ' align-பொருட்கள் கொள்கலனின் குறுக்கு அச்சில் உள்ள நெகிழ்வு மற்றும் கட்டப் பொருட்களின் நிலையைக் கட்டுப்படுத்தும் பயன்பாடுகள். இந்த பயன்பாட்டு வகுப்புகளில் 'பொருட்கள்-தொடக்கம்', 'பொருட்கள்-மையம்', 'பொருட்கள்-முடிவு', 'உருப்படிகள்-அடிப்படை' மற்றும் 'உருப்படிகள்-நீட்டிப்பு' ஆகியவை அடங்கும். மேலும், பயனர்கள் வெவ்வேறு திரை அளவுகளில் கொள்கலனின் குறுக்கு அச்சில் உள்ள நெகிழ்வு அல்லது கட்டம் உருப்படியின் நிலையை மாற்ற “உருப்படிகள்-<மதிப்பு>” பயன்பாட்டில் உள்ள பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்தலாம்.
இந்தக் கட்டுரை டெயில்விண்டில் உள்ள “அலைன்-ஐட்டம்ஸ்” பயன்பாடுகளில் பிரேக் பாயின்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்தும் முறையை விளக்குகிறது.
டெயில்விண்டில் 'அலைன்-ஐட்டம்கள்' மூலம் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களை எவ்வாறு பயன்படுத்துவது?
டெயில்விண்டில் உள்ள 'நீதிப்படுத்தல்-உள்ளடக்க' பயன்பாடுகளில் விரும்பிய பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்த, ஒரு HTML கட்டமைப்பை உருவாக்கவும். அதன் பிறகு, குறிப்பிட்ட மதிப்பை வரையறுக்கவும் ' பொருட்கள்-<மதிப்பு> 'பயன்படுத்தும் பல்வேறு திரை அளவுகளுக்கான பயன்பாடு' எம்.டி ' அல்லது ' lg ” முறிவு புள்ளிகள். இறுதியாக, சரிபார்ப்புக்காக இணையப் பக்கத்தின் திரை அளவை மாற்றவும்.
உதாரணமாக
இந்த எடுத்துக்காட்டில், 'பொருட்கள்-தொடக்க' பண்புடன் ஒரு நெகிழ்வு கொள்கலனை உருவாக்குவோம். நாங்கள் பயன்படுத்துவோம் ' எம்.டி 'முறிவு புள்ளி' பொருட்கள்-மையம் 'பயன்பாட்டு மற்றும்' lg 'முறிவு புள்ளி' பொருட்கள்-முடிவு 'பயன்பாடு' இல் வெளியீடு டெயில்விண்டில் 'அலைன்-ஐட்டம்ஸ்' பயன்பாடுகளுடன் பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்த, ''க்கு தேவையான மதிப்பை வரையறுக்கவும் பொருட்கள்-<மதிப்பு> 'பயன்படுத்துவதன் மூலம் பல்வேறு திரை அளவுகளுக்கான பயன்பாடு' எம்.டி ' அல்லது ' lg ” முறிவு புள்ளிகள். சரிபார்ப்புக்கு, இணையப் பக்கத்தின் திரை அளவை மாற்றி, மாற்றங்களை உறுதிப்படுத்தவும். டெயில்விண்டில் உள்ள 'அலைன்-ஐட்டம்ஸ்' பயன்பாடுகளில் குறிப்பிட்ட பிரேக் பாயின்ட்கள் மற்றும் மீடியா வினவல்களைப் பயன்படுத்துவதற்கான உதாரணத்தை இந்தக் கட்டுரை விளக்கியுள்ளது.
< உடல் >
< div வர்க்கம் = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div வர்க்கம் = 'bg-pink-600 py-4 w-40' > 1 div >
< div வர்க்கம் = 'bg-pink-600 py-12 w-40' > 2 div >
< div வர்க்கம் = 'bg-pink-600 py-8 w-40' > 3 div >
div >
உடல் >
இங்கே:
திரையின் அளவு மாறுபடும் போது ஃப்ளெக்ஸ் உருப்படிகளின் செங்குத்து சீரமைப்பு மாறுகிறது என்பதை மேலே உள்ள வெளியீடு காட்டுகிறது. குறிப்பிடப்பட்ட பிரேக்பாயிண்ட்கள் மற்றும் மீடியா வினவல்கள் 'அலைன்-ஐட்டம்ஸ்' பயன்பாட்டுடன் திறம்பட பயன்படுத்தப்பட்டுள்ளன என்பதை இது குறிக்கிறது. முடிவுரை