டெயில்விண்ட் CSS இல் பதிலளிக்கக்கூடிய முறிவுப் புள்ளிகளைப் பயன்படுத்துவதற்கான முறையை இந்த எழுதுதல் விளக்குகிறது.
டெயில்விண்டில் ரெஸ்பான்சிவ் பிரேக் பாயின்ட்களை எப்படி பயன்படுத்துவது?
டெயில்விண்டில் பதிலளிக்கக்கூடிய பிரேக்பாயிண்ட்களைப் பயன்படுத்த, 'போன்ற பதிலளிக்கக்கூடிய மாற்றிகளைப் பயன்படுத்தவும் sm ”,” எம்.டி ”,” lg ”,” xl 'மற்றும்' 2xl HTML நிரலில் உள்ள மற்ற வகுப்புகளுடன். பின்னர், HTML இணையப் பக்கத்தைப் பார்த்து, பிரேக் பாயிண்ட்கள் சரியாக வேலை செய்கிறதா என்பதை உறுதிப்படுத்த திரை அளவை மாற்றவும்.
படி 1: HTML திட்டத்தில் பதிலளிக்கக்கூடிய மாற்றிகளைப் பயன்படுத்தவும்
ஒரு HTML நிரலை உருவாக்கி, தேவையான ஸ்டைலிங்குடன் பதிலளிக்கக்கூடிய மாற்றிகளைப் பயன்படுத்தவும். உதாரணமாக, நாங்கள் பயன்படுத்தினோம் ' sm ”,” எம்.டி ”,” lg ”,” xl 'மற்றும்' 2xl ” பதிலளிக்கக்கூடிய மாற்றிகள்:
< உடல் >
< div வர்க்கம் = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 வர்க்கம் = 'text-7xl text-white text-center p-20' > லினக்ஸ் குறிப்பு < / h1 >
< / div >
< / உடல் >
இங்கே:
- ' bg-fuchsia-400 'வகுப்பு பின்னணி நிறத்தை அமைக்கிறது ஃபுச்சியாவுக்கு.
- ' sm:bg-pink-600 ” வகுப்பு சிறிய திரைகளுக்கான பின்னணியில் இளஞ்சிவப்பு நிறத்தைப் பயன்படுத்துகிறது.
- ' md:bg-green-700 ” வகுப்பு நடுத்தர திரைகளில் பின்னணி நிறத்தை பச்சை நிறமாக மாற்றுகிறது.
- ' lg:bg-purple-50 ” வகுப்பு பெரிய திரைகளுக்கு பின்னணி நிறத்தை ஊதா நிறமாக அமைக்கிறது.
- ' xl:bg-teal-600 ” வகுப்பு கூடுதல் பெரிய திரைகளுக்கு பின்னணியில் டீல் நிறத்தைப் பயன்படுத்துகிறது.
- ' 2xl:bg-yellow-500 ” வகுப்பு 2xl திரைகளில் பின்னணி நிறத்தை மஞ்சள் நிறமாக மாற்றுகிறது.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
பதிலளிக்கக்கூடிய முறிவுப் புள்ளிகள் சரியாக வேலை செய்கிறதா இல்லையா என்பதைச் சரிபார்க்க HTML இணையப் பக்கத்தைப் பார்க்கவும்:
மேலே உள்ள இணையப் பக்கத்தில், பிரேக் பாயின்ட்கள் குறிப்பிடப்பட்ட திரையின் அளவுடன் இணையப் பக்கத்தின் நிறம் மாறுவதை அவதானிக்கலாம்.
முடிவுரை
டெயில்விண்டில் பதிலளிக்கக்கூடிய பிரேக்பாயிண்ட்களைப் பயன்படுத்த, 'போன்ற பதிலளிக்கக்கூடிய மாற்றிகளைப் பயன்படுத்தவும் sm ”,” எம்.டி ”,” lg ”,” xl 'மற்றும்' 2xl HTML நிரலில் உள்ள மற்ற வகுப்புகளுடன். திரையின் அளவைப் பொறுத்து ஒரு குறிப்பிட்ட உறுப்புக்கு வெவ்வேறு பாணிகளைப் பயன்படுத்த இந்த மாற்றிகள் பயன்படுத்தப்படுகின்றன. டெயில்விண்ட் CSS இல் பதிலளிக்கக்கூடிய முறிவுப் புள்ளிகளைப் பயன்படுத்துவதற்கான முறையை இந்த எழுதுதல் எடுத்துக்காட்டுகிறது.