ఈ కథనం Tailwind CSSలో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో 'బ్రేక్-ఆఫ్టర్'ని ఉపయోగించుకునే పద్ధతిని ప్రదర్శిస్తుంది.
టైల్‌విండ్‌లో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో 'బ్రేక్-ఆఫ్టర్' ఎలా ఉపయోగించాలి?
బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో “బ్రేక్-ఆఫ్టర్”ని ఉపయోగించడానికి, HTML ప్రోగ్రామ్‌లోని “బ్రేక్-ఆఫ్టర్” యుటిలిటీతో విభిన్న స్క్రీన్ పరిమాణాల కోసం విభిన్న విలువలు మరియు స్టైలింగ్‌ను నిర్వచించండి. తర్వాత, HTML వెబ్ పేజీని వీక్షించడం ద్వారా అవుట్‌పుట్‌ను ధృవీకరించండి.
ఆచరణాత్మక అమలును అన్వేషిద్దాం:
దశ 1: 'బ్రేక్-ఆఫ్టర్' యుటిలిటీతో బ్రేక్ పాయింట్లు మరియు మీడియా ప్రశ్నలను ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు 'బ్రేక్-ఆఫ్టర్' యుటిలిటీతో విభిన్న స్క్రీన్ పరిమాణాల కోసం విభిన్న విలువలు మరియు స్టైలింగ్‌ను పేర్కొనండి. ఉదాహరణకు, మేము ఉపయోగించాము ' md '' తో బ్రేక్ పాయింట్ కాలమ్ తర్వాత విరామం 'యుటిలిటీ మరియు' lg '' తో బ్రేక్ పాయింట్ బ్రేక్-తర్వాత-నివారిస్తుంది ' వినియోగ:
< శరీరం >
< div తరగతి = 'నిలువు వరుసలు-2 bg-teal-400' >
< p తరగతి = 'md:బ్రేక్-ఆఫ్టర్-కాలమ్ lg:బ్రేక్-ఆఫ్టర్-ఎవాయిడ్' > హలో... < / p >
< p > ఇక్కడ స్వాగతం... < / p >
< p > Tailwind CSS గురించి తెలుసుకోండి... < / p >
< p > ఇది CSS ఫ్రేమ్‌వర్క్... < / p >
< p > బై... < / p >
< / div >
< / శరీరం >
ఇక్కడ:
- ది ' md:బ్రేక్-ఆఫ్టర్-కాలమ్ '' వద్ద ఈ నిర్దిష్ట
మూలకం తర్వాత కాలమ్ విరామం జరగాలని తరగతి సూచిస్తుంది md ”బ్రేక్‌పాయింట్ (మీడియం స్క్రీన్ పరిమాణం).
- ది ' lg: బ్రేక్-తర్వాత-అవాయిడ్ 'ఎలిమెంట్ బ్రేక్-ఆఫ్టర్' వద్ద ఉండకూడదని తరగతి సూచిస్తుంది lg ” బ్రేక్ పాయింట్ (పెద్ద స్క్రీన్ పరిమాణం).
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
HTML వెబ్ పేజీని వీక్షించడం ద్వారా బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలు వర్తింపజేయబడిందో లేదో ధృవీకరించండి:
పై వెబ్ పేజీలో, మీడియం స్క్రీన్‌లో పేర్కొన్న మూలకంపై నిలువు వరుస విరామం ఏర్పడింది మరియు పెద్ద స్క్రీన్‌లో బ్రేక్-ఆఫ్టర్ నివారించబడింది.
ముగింపు
Tailwindలో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో 'బ్రేక్-ఆఫ్టర్'ని ఉపయోగించడానికి, ముందుగా, HTML ఫైల్‌ను సృష్టించండి. ఆపై, విభిన్న విలువలను పేర్కొనడం మరియు విభిన్న స్క్రీన్ పరిమాణాల కోసం స్టైలింగ్ చేయడం ద్వారా బ్రేక్ పాయింట్లు మరియు మీడియా ప్రశ్నలను 'బ్రేక్-ఆఫ్టర్' యుటిలిటీతో ఉపయోగించండి. ధృవీకరణ కోసం, HTML ప్రోగ్రామ్‌ను అమలు చేయండి మరియు వెబ్ పేజీని వీక్షించండి. ఈ కథనం Tailwind CSSలో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో 'బ్రేక్-ఆఫ్టర్'ని ఉపయోగించుకునే పద్ధతిని ప్రదర్శించింది.