టైల్‌విండ్ CSSలో, ' పెట్టె-అలంకరణ-బ్రేక్ ”ఒక మూలకం బహుళ పంక్తులు లేదా నిలువు వరుసలను విస్తరించినప్పుడు దాని నేపథ్యం, సరిహద్దు మరియు పాడింగ్ యొక్క రెండరింగ్‌ను ప్రాపర్టీ నిర్ణయిస్తుంది. దీనికి రెండు తరగతులు ఉన్నాయి, అంటే, ' ముక్క 'మరియు' క్లోన్ ”. పరికరం వెడల్పును బట్టి మూలకాల యొక్క లేఅవుట్ మరియు రూపురేఖలు ఎలా మారతాయో గుర్తించడానికి మరియు బ్రేక్‌పాయింట్‌ల ఆధారంగా విభిన్న శైలులను వర్తింపజేయడానికి వినియోగదారులు బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో 'బాక్స్-డెకరేషన్-బ్రేక్' ప్రాపర్టీని ఉపయోగించవచ్చు.
ఈ కథనం బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో బాక్స్ డెకరేషన్ బ్రేక్‌ను ఉపయోగించే పద్ధతిని ప్రదర్శిస్తుంది.
టైల్‌విండ్‌లో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో బాక్స్ డెకరేషన్ బ్రేక్‌ని ఎలా ఉపయోగించాలి?
బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో బాక్స్ డెకరేషన్ బ్రేక్‌ను ఉపయోగించడానికి, HTML ప్రోగ్రామ్‌లో విభిన్న స్క్రీన్ పరిమాణాల కోసం విభిన్న విలువలు మరియు స్టైలింగ్‌ను నిర్వచించడం అవసరం. ఆపై, ధృవీకరణ కోసం HTML ప్రోగ్రామ్‌ను అమలు చేయడం ద్వారా వెబ్ పేజీని వీక్షించండి.
మెరుగైన అవగాహన కోసం, దిగువ పేర్కొన్న దశలను చూడండి:
దశ 1: బాక్స్ డెకరేషన్ బ్రేక్‌తో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు విభిన్న స్క్రీన్ పరిమాణాల కోసం విభిన్న విలువలు మరియు స్టైలింగ్‌ను పేర్కొనండి. ఉదాహరణకు, మేము నిర్వచించాము ' md 'మరియు' lg ” వారి స్టైలింగ్‌లతో బ్రేక్‌పాయింట్‌లు:
< శరీరం >< వ్యవధి తరగతి = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
హలో < br />
Linux < br />
సూచన
వ్యవధి >
శరీరం >
ఇక్కడ:
- ' bg-teal-600 ”టీల్ రంగును నేపథ్యానికి సెట్ చేస్తుంది.
- ' పెట్టె-అలంకరణ-క్లోన్ ” అనేది క్లోనింగ్ బాక్స్ అలంకరణ కోసం ఉపయోగించే కస్టమ్ క్లాస్.
- ' md:bg-yellow-500 '' కోసం మూలకానికి పసుపు నేపథ్య రంగును వర్తింపజేస్తుంది md ”బ్రేక్‌పాయింట్ (మధ్యస్థ-పరిమాణ స్క్రీన్‌లు).
- ' lg: బాక్స్-డెకరేషన్-స్లైస్ '' కోసం పెట్టె అలంకరణకు స్లైసింగ్ ప్రభావాన్ని సెట్ చేస్తుంది lg ”బ్రేక్‌పాయింట్ (పెద్ద స్క్రీన్‌లు).
- ' వచనం-తెలుపు ” వచనానికి తెలుపు రంగును సెట్ చేస్తుంది.
- ' టెక్స్ట్-3xl ” ఫాంట్ పరిమాణాన్ని 3xlకి సెట్ చేస్తుంది.
- ' px-2 ” మూలకానికి 2 పిక్సెల్‌ల క్షితిజ సమాంతర పాడింగ్‌ని జోడిస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలు విజయవంతంగా వర్తింపజేయబడ్డాయని నిర్ధారించుకోవడానికి, HTML ప్రోగ్రామ్‌ను అమలు చేయండి మరియు వెబ్ పేజీని వీక్షించండి:
బ్రేక్ పాయింట్లు మరియు మీడియా ప్రశ్నలు నిర్వచించబడిన దాని ప్రకారం వెబ్ పేజీ మారుతున్నట్లు చూడవచ్చు.
ముగింపు
Tailwindలో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో బాక్స్ డెకరేషన్ బ్రేక్‌ను ఉపయోగించడానికి, ముందుగా, HTML ఫైల్‌ను సృష్టించండి. తర్వాత, HTML ప్రోగ్రామ్‌లో విభిన్న విలువలు మరియు విభిన్న స్క్రీన్ పరిమాణాల కోసం స్టైలింగ్‌ని పేర్కొనడం ద్వారా బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఉపయోగించండి. ధృవీకరణ కోసం, HTML ప్రోగ్రామ్‌ను అమలు చేయండి మరియు వెబ్ పేజీని వీక్షించండి. ఈ కథనం బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో బాక్స్ డెకరేషన్ బ్రేక్‌ను ఉపయోగించే పద్ధతిని ప్రదర్శించింది.