ప్రతిస్పందించే వెబ్‌సైట్‌ను రూపొందిస్తున్నప్పుడు, టైల్‌విండ్ ' బ్రేక్ పాయింట్లు 'మరియు' మీడియా ప్రశ్నలు ”అనుకూలంగా విభిన్న స్క్రీన్ పరిమాణాలకు అనుగుణంగా ఉండే బహుళ కార్యాచరణలను వర్తింపజేయడంలో కీలక పాత్ర పోషిస్తుంది. ఈ లక్షణాలు వివిధ తరగతుల ద్వారా పేర్కొనబడాలి అంటే, ' md (మధ్యస్థ-పరిమాణ స్క్రీన్‌లు)”, “lg(పెద్ద-పరిమాణ స్క్రీన్)” లేదా “@మీడియా ద్వారా 'నిర్దిష్ట షరతు ఆధారంగా కార్యాచరణలను జోడించే నియమం.
ఈ వ్యాసం కింది కంటెంట్‌ను కవర్ చేస్తుంది:
- టెయిల్‌విండ్ బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో టెక్స్ట్ డెకరేషన్ థిక్‌నెస్‌ని ఎలా అప్లై చేయాలి?
- టెయిల్‌విండ్ బ్రేక్‌పాయింట్‌లతో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం.
- టెయిల్‌విండ్ మీడియా ప్రశ్నలతో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం.
టెయిల్‌విండ్ బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో టెక్స్ట్ డెకరేషన్ థిక్‌నెస్‌ని ఎలా అప్లై చేయాలి?
ది ' టెక్స్ట్ అలంకరణ మందం '' సహాయంతో వర్తించవచ్చు టెక్స్ట్-అలంకరణ-మందం పిక్సెల్‌లలో లక్ష్యం మందం విలువను అనుసరించే లక్షణం. ఈ పిక్సెల్‌లు ' 1px', '2px', '4px' లేదా '8px ”. ది ' బ్రేక్ పాయింట్లు ''ని ఉపయోగించి వినియోగదారు స్క్రీన్ పరిమాణానికి అనుగుణంగా వివిధ అనువర్తిత కార్యాచరణలను స్వీకరించడానికి వర్తించబడుతుంది md (మధ్యస్థ-పరిమాణ స్క్రీన్‌లు)”, “lg(పెద్ద-పరిమాణ స్క్రీన్) 'తరగతులు మొదలైనవి. ' మీడియా ప్రశ్నలు '@ ద్వారా బ్రౌజర్ మరియు OS పారామితుల సమితి ఆధారంగా షరతులతో కూడిన అమలు శైలులను ప్రారంభించండి మీడియా ” నియమం.
ఉదాహరణ 1: టెయిల్‌విండ్ బ్రేక్‌పాయింట్‌లతో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం
ఈ ఉదాహరణ స్క్రీన్ పరిమాణాల ప్రకారం మారే శైలిని వర్తింపజేయడానికి వివిధ పాయింట్ల వద్ద టెక్స్ట్ డెకరేషన్ మందాన్ని సెట్ చేస్తుంది:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< శీర్షిక >< / శీర్షిక >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'అండర్లైన్ MD:decoration-8 lg:box-decoration-slice text-black text-2xl' id = 'ఉష్ణోగ్రత' > ఇది Linuxhint < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ స్నిప్పెట్ ప్రకారం, క్రింద ఇవ్వబడిన దశలను వర్తించండి:
- ముందుగా, Tailwind ఫంక్షనాలిటీలను వర్తింపజేయడానికి CDN పాత్‌ను చేర్చండి.
- అప్పుడు, '<' చేయండి వచన ప్రాంతం >' మూలకం మరియు డిఫాల్ట్ మరియు మధ్యస్థ స్క్రీన్‌లలో పేర్కొన్న టెక్స్ట్ డెకరేషన్ మందం స్థాయిలను '' ద్వారా చేర్చండి md ” తరగతి, వరుసగా.
- ది ' టెక్స్ట్-నలుపు 'మరియు' టెక్స్ట్-2xl ” తరగతులు వరుసగా రంగు (నలుపు) మరియు ఫాంట్ పరిమాణం అంటే 2xlని వచనానికి కేటాయిస్తాయి.
అవుట్‌పుట్
ఈ ఫలితం నుండి, టెక్స్ట్-డెకరేషన్ మందం వివిధ స్క్రీన్ పరిమాణానికి తగిన విధంగా స్వీకరించబడిందని సూచించవచ్చు.
ఉదాహరణ 2: టెయిల్‌విండ్ మీడియా ప్రశ్నలతో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం
ది '@ మీడియా వివిధ మీడియా రకాలు/పరికరాల కోసం వివిధ శైలులను అమలు చేయడానికి మీడియా ప్రశ్నలలో నియమం ఉపయోగించబడుతుంది. ఈ ప్రత్యేక ప్రదర్శన పేర్కొన్న పరామితి/షరతు ఆధారంగా వచన మందాన్ని అలంకరించడానికి ఈ మీడియా ప్రశ్నలను ఉపయోగిస్తుంది:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< శీర్షిక >< / శీర్షిక >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< h1 id = 'ఉష్ణోగ్రత' >ఇది Linuxhint< / h1 >
< / శరీరం >
< / html >
< శైలి రకం = 'టెక్స్ట్/సిఎస్ఎస్' >
#ఉష్ణోగ్రత {
టెక్స్ట్-అలంకరణ: అండర్లైన్;
వచనం- సమలేఖనం : కేంద్రం;
}
@ మీడియా ( గరిష్టంగా- వెడల్పు :550px ) {
#ఉష్ణోగ్రత {
టెక్స్ట్-డెకరేషన్-మందం: 4px;
} }
< / శైలి >
ఈ కోడ్ బ్లాక్‌లో, దిగువ అందించబడిన పద్ధతులను పరిగణించండి:
- అదేవిధంగా, CDN మార్గాన్ని చేర్చండి.
- ఆపై, “<ని జోడించండి h1 పేర్కొన్న 'id'ని కలిగి ఉన్న మూలకం.
- కోడ్ యొక్క CSS భాగంలో, “< శైలి >” ట్యాగ్, చేర్చబడిన శీర్షికను స్టైల్ చేయండి.
- అలాగే, “@ని సృష్టించండి మీడియా 'స్క్రీన్ వెడల్పు ఉన్నంత వరకు షరతును వర్తించే నియమం' 550px ”, టెక్స్ట్-డెకరేషన్ మందం సెట్ చేయబడింది “ 4 ”పిక్సెల్స్.
- స్క్రీన్ వెడల్పు ఈ పరిమితిని దాటిన తర్వాత, వచనం కేవలం అండర్లైన్ చేయబడుతుంది.
అవుట్‌పుట్
ఈ ఫలితం '@మీడియా' నియమం అంటే, స్క్రీన్ వెడల్పుకు అనుగుణంగా మీడియా ప్రశ్నలు వర్తింపజేయబడతాయని సూచిస్తుంది.
ముగింపు
'' వంటి వివిధ తరగతులను ఉపయోగించి వినియోగదారు స్క్రీన్ పరిమాణానికి అనుగుణంగా అనువర్తిత కార్యాచరణలను ప్రదర్శించడానికి బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను టెక్స్ట్ డెకరేషన్ మందంతో అన్వయించవచ్చు. md', 'lg ” లేదా “@ ద్వారా మీడియా ” నియమం, వరుసగా. తరువాతి విధానం 'లో పేర్కొనబడింది CSS ”కోడ్ లక్ష్యం మూలకాన్ని ప్రేరేపిస్తుంది మరియు సెట్ పరామితి/కండిషన్ ఆధారంగా దానిని అలంకరిస్తుంది. ఈ గైడ్ Tailwind బ్రేక్‌పాయింట్ మరియు మీడియా ప్రశ్నలతో టెక్స్ట్ డెకరేషన్ మందాన్ని వర్తింపజేయడం గురించి వివరించింది.