ఈ కథనం Tailwind బ్రేక్‌పాయింట్‌లపై కనిష్ట ఎత్తు మరియు గరిష్ట ఎత్తును వర్తింపజేసే విధానాన్ని మరియు కింది అవుట్‌లైన్‌ని ఉపయోగించి మీడియా ప్రశ్నలను అందిస్తుంది:
- Tailwind బ్రేక్‌పాయింట్‌లు & మీడియా ప్రశ్నలపై కనిష్ట-ఎత్తు ఆస్తిని సెట్ చేస్తోంది
- Tailwind బ్రేక్‌పాయింట్‌లు & మీడియా ప్రశ్నలపై గరిష్ట-ఎత్తు ఆస్తిని సెట్ చేస్తోంది
Tailwind బ్రేక్‌పాయింట్ & మీడియా ప్రశ్నలపై కనిష్ట-ఎత్తు ఆస్తిని ఎలా సెట్ చేయాలి?
టైల్‌విండ్ డిఫాల్ట్ బ్రేక్‌పాయింట్‌లను మరియు విభిన్న స్క్రీన్ పరిమాణాల కోసం డిజైన్‌ను ప్రతిస్పందించేలా చేయడానికి మీడియా ప్రశ్నలను అందిస్తుంది. పేర్కొన్న స్క్రీన్ పరిమాణాన్ని చేరుకున్నప్పుడు బ్రేక్‌పాయింట్‌లకు అందించబడిన లక్షణాలు వర్తించబడతాయి. ఈ డిఫాల్ట్ బ్రేక్‌పాయింట్‌ల కనీస వెడల్పు క్రింది విధంగా వివరించబడింది:
- sm: కనిష్ట వెడల్పు '640px'.
- md: కనిష్ట వెడల్పు '768px'.
- lg: కనిష్ట వెడల్పు '1024px'.
- xl: కనిష్ట వెడల్పు '1280px'.
- 2xl: కనిష్ట వెడల్పు '1536px'.
కనిష్ట-ఎత్తు ఆస్తి మూలకం యొక్క ఎత్తుకు తక్కువ పరిమితిని సెట్ చేస్తుంది. దీనర్థం ఇది ఒక మూలకం కలిగి ఉండటానికి అనుమతించబడిన కనీస ఎత్తును నిర్దేశిస్తుంది. టైల్‌విండ్‌లోని బ్రేక్‌పాయింట్‌లతో కనిష్ట-ఎత్తు ప్రాపర్టీని ఉపయోగించడానికి, కింది సింటాక్స్ ఉపయోగించబడుతుంది:
< div తరగతి = '{బ్రేక్‌పాయింట్ ఉపసర్గ}:min-h-{value}...' > < / div >
మెరుగైన అవగాహన పొందడానికి పైన నిర్వచించిన సింటాక్స్‌ని ప్రదర్శనలో ఉపయోగించుకుందాం. ఈ ఉదాహరణలో, మూలకం యొక్క కనిష్ట ఎత్తు పరిమితి 'పై పెరుగుతుంది md ” బ్రేక్ పాయింట్. ఇది మూలకం యొక్క మొత్తం ఎత్తును పెంచుతుంది.
< 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 ఎత్తును అందిస్తుంది.
- ది ' గుండ్రని-md 'క్లాస్ div మూలకానికి రౌండ్ కార్నర్‌ను అందిస్తుంది.
- ది ' bg-{color}-{number} ” class div మూలకం యొక్క నేపథ్యానికి పేర్కొన్న రంగును అందిస్తుంది.
- ది ' టెక్స్ట్-సెంటర్ 'తరగతి టెక్స్ట్ మూలకాన్ని div మూలకం మధ్యలో ఉంచుతుంది.
- ది ' md:min-h-స్క్రీన్ ” క్లాస్ కనిష్ట ఎత్తు పరిమితిని 100% స్క్రీన్ ఎత్తుకు సమానంగా పెంచుతుంది.
అవుట్‌పుట్:
ఇది అవుట్‌పుట్‌లో చూడవచ్చు, ' md ” స్క్రీన్ పరిమాణం చేరుకుంది, మూలకం స్క్రీన్ ఎత్తులో 100% పొందుతుంది. ' కోసం కనిష్ట ఎత్తు పరిమితి కారణంగా ఇది జరుగుతుంది md ” బ్రేక్ పాయింట్ స్క్రీన్ ఎత్తుకు సమానంగా సెట్ చేయబడింది:
Tailwind బ్రేక్‌పాయింట్ & మీడియా ప్రశ్నలపై గరిష్ట-ఎత్తు ఆస్తిని ఎలా సెట్ చేయాలి?
గరిష్ట ఎత్తు తరగతి టైల్‌విండ్‌లోని ఎత్తు ఆస్తికి ఎగువ పరిమితిని సెట్ చేస్తుంది. దీనర్థం ఇది ఒక మూలకం కలిగి ఉండే గరిష్ట ఎత్తును నిర్దేశిస్తుంది. బ్రేక్‌పాయింట్‌లతో కనీస ఎత్తు తరగతిని ఉపయోగించడం కోసం వాక్యనిర్మాణం క్రింది విధంగా ఉంది:
< div తరగతి = '{బ్రేక్‌పాయింట్ ఉపసర్గ}:max-h-{size}...' > < / div >మెరుగైన అవగాహన పొందడానికి పైన నిర్వచించిన సింటాక్స్‌ని ప్రదర్శనలో ఉపయోగించుకుందాం. ఈ ఉదాహరణలో, మూలకం ' కోసం నిర్దిష్ట గరిష్ట ఎత్తు పరిమితితో అందించబడుతుంది md ” బ్రేక్ పాయింట్. ఇది మూలకానికి అందించబడిన డిఫాల్ట్ ఎత్తును తగ్గిస్తుంది.
< 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 ” తరగతి.
అవుట్‌పుట్:
దిగువ అవుట్‌పుట్‌లో, స్క్రీన్ పరిమాణం ''కి చేరుకున్న తర్వాత స్పష్టంగా చూడవచ్చు. md ”బ్రేక్‌పాయింట్, మూలకం యొక్క మూలకం ఎత్తు చిన్నదిగా మారుతుంది.
టైల్‌విండ్ బ్రేక్‌పాయింట్‌లతో కనిష్ట మరియు గరిష్ట ఎత్తు ప్రాపర్టీని సెట్ చేయడం గురించి అంతే.
ముగింపు
Tailwind బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో గరిష్ట ఎత్తు ప్రాపర్టీని సెట్ చేయడానికి, “ {బ్రేక్‌పాయింట్ ఉపసర్గ}:max-h-{size} ” క్లాస్ ఉపయోగించబడుతుంది. అదేవిధంగా, టెయిల్‌విండ్ బ్రేక్‌పాయింట్‌లతో కనీస ఎత్తు ప్రాపర్టీని సెట్ చేయడానికి, “ {బ్రేక్‌పాయింట్ ఉపసర్గ}:min-h-{size} ” క్లాస్ ఉపయోగించబడుతుంది. ఈ కథనం టైల్‌విండ్‌లోని బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలకు కనిష్ట మరియు గరిష్ట-ఎత్తు లక్షణాలను వర్తింపజేసే విధానాన్ని అందించింది.