டெயில்விண்டில் உள்ள பொசிஷன் சொத்துடன் இணைந்து பிரேக்பாயிண்ட் மற்றும் மீடியா வினவலை எவ்வாறு பயன்படுத்துவது என்பதை இந்தக் கட்டுரை விளக்குகிறது.
நிலைச் சொத்துடன் பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களை எவ்வாறு பயன்படுத்துவது?
பிரேக் பாயிண்ட்கள் ஒரு இறுதி பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்குவதற்கான முக்கிய தொகுதிகள். வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப அமைப்பை உருவாக்க இது பயன்படுகிறது. திரை தெளிவுத்திறனைப் பொறுத்து உறுப்புகளுக்கு குறிப்பிட்ட பாணிகளைப் பயன்படுத்த மீடியா வினவல்கள் பயன்படுத்தப்படுகின்றன. வெளியீட்டை மேலும் உகந்ததாக்க, நிலை பண்புக்கூறை இவற்றுடன் இணைந்து பயன்படுத்தலாம்.
படி 1: பிரேக் பாயிண்ட்கள் மற்றும் மீடியா வினவல்களுடன் பொசிஷன் சொத்தைப் பயன்படுத்துதல்
இந்தப் படிநிலையில், தேர்ந்தெடுக்கப்பட்ட 'மீடியா வினவல்கள் அல்லது மீடியா வினவல்களுடன் பொசிஷன் சொத்தைப் பயன்படுத்த நிரல் செருகப்படுகிறது. ப ”உறுப்பு:
< உடல் வர்க்கம் = 'bg-slate-500' >
< div வர்க்கம் = 'text-yellow-300 p-4 lg:p-8' >
< ப வர்க்கம் = 'relative md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > இந்த உரை திரையின் அளவைப் பொறுத்து வெவ்வேறு எழுத்துரு அளவுகளைக் கொண்டிருக்கும். இது சிறிய திரைகளில் சிறியதாகவும், நடுத்தர திரைகளில் நடுத்தர அளவு மற்றும் பெரிய திரைகளில் பெரியதாகவும் இருக்கும். < / ப >
< / div >
< / உடல் >
இந்த குறியீட்டில்:
- ' bg-slate-500 ” பின்னணி நிறத்தை சாம்பல் நிறமாக அமைக்கிறது.
- ' உரை-மஞ்சள்-300 ” உரை நிறத்தை மஞ்சள் நிறமாக மாற்றுகிறது.
- ' ப-4 ” 4px இன் திணிப்பு சேர்க்கிறது.
- ' lg: ப-8' பெரிய திரைகளில் 8px இன் திணிப்பைச் சேர்க்கிறது.
- ஆரம்ப நிலை '' ஐப் பயன்படுத்தி பெற்றோர் பக்கத்துடன் தொடர்புடையதாக அமைக்கப்படுகிறது உறவினர் ' வர்க்கம்.
- ' md:text-lg ” நடுத்தர அளவிலான திரையில் உரையை பெரிதாக்குகிறது.
- 'எம்டி: முழுமையான' நடுத்தர அளவிலான திரையில் உரையின் நிலையை ஒப்பீட்டளவில் இருந்து முழுமையானதாக மாற்றுகிறது.
- ' md:translate-x-4” மற்றும் “md:translate-y-4” நடுத்தர திரை அளவில் உரையை 4px கீழே மற்றும் வலதுபுறமாக நகர்த்தவும்.
- ' lg:text-xl ” பெரிய அளவிலான திரையில் உரை அளவை கூடுதல் பெரியதாக மாற்றுகிறது.
- ' lg: நிலையான ” பெரிய அளவிலான திரையில் உரையின் நிலையை முழுமையிலிருந்து நிலையானதாக மாற்றுகிறது
- ' lg:translate-x-4 'மற்றும்' lg:translate-y-4 ” பெரிய திரை அளவில் 4px உரையை கீழே மற்றும் வலது பக்கம் நகர்த்தவும்.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
மேலே உள்ள குறியீட்டின் மூலம் உருவாக்கப்பட்ட வலைப்பக்கத்தை முன்னோட்டமிட்டு, மாற்றத்தைப் பார்க்க திரையின் அளவைச் சரிசெய்யவும்:
நடுத்தர மற்றும் பெரிய திரை அளவுகளில் உரை பதிலளிக்கக்கூடிய நடத்தையைக் காட்டுவதைக் காணலாம்.
முடிவுரை
டெயில்விண்டில் பிரேக் பாயின்ட் மற்றும் மீடியா வினவல்களைப் பயன்படுத்த, பிரேக் பாயின்ட் மற்றும் மீடியா வினவலை ஒவ்வொரு பிரேக் பாயிண்டிற்கும் அமைக்கவும், மேலும் திரையின் வெவ்வேறு பிரேக் பாயிண்ட்களில் பொசிஷன் பண்பை மாற்றவும். இயல்புநிலை முறிவுகள் ' sm ',' எம்டி ',' lg ', மற்றும் ' xl ”. இந்த வலைப்பதிவு டெயில்விண்டில் பொசிஷன் பிராப்பர்ட்டியுடன் பிரேக்பாயிண்ட் மற்றும் மீடியா வினவலை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.