టైల్‌విండ్‌లోని పొజిషన్ ప్రాపర్టీతో కలిపి బ్రేక్‌పాయింట్ మరియు మీడియా ప్రశ్నను ఎలా ఉపయోగించాలో ఈ కథనం వివరిస్తుంది.
పొజిషన్ ప్రాపర్టీతో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి?
అంతిమ ప్రతిస్పందించే డిజైన్‌ను రూపొందించడానికి బ్రేక్‌పాయింట్‌లు కోర్ బ్లాక్‌లు. వివిధ స్క్రీన్ పరిమాణాలకు అనుగుణంగా లేఅవుట్ చేయడానికి ఇది ఉపయోగించబడుతుంది. స్క్రీన్ రిజల్యూషన్ ఆధారంగా మూలకాలకు పేర్కొన్న శైలులను వర్తింపజేయడానికి మీడియా ప్రశ్నలు ఉపయోగించబడతాయి. అవుట్‌పుట్‌ను మరింత ఆప్టిమైజ్ చేయడానికి వీటితో కలిపి స్థాన లక్షణాన్ని అన్వయించవచ్చు.
దశ 1: బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలతో పొజిషన్ ప్రాపర్టీని వర్తింపజేయడం
ఈ దశలో, ఎంచుకున్న “పై బ్రేక్‌పాయింట్‌లు లేదా మీడియా ప్రశ్నల వెంట స్థాన ఆస్తిని వర్తింపజేయడానికి ప్రోగ్రామ్ చొప్పించబడుతుంది. p ' మూలకం:
< శరీరం తరగతి = 'bg-slate-500' >
< div తరగతి = 'text-yellow-300 p-4 lg:p-8' >
< p తరగతి = 'సంబంధిత md:సంపూర్ణ md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:స్టాటిక్ lg:translate-x-4 lg:translate-y-4 ' > ఈ వచనం స్క్రీన్ పరిమాణం ఆధారంగా విభిన్న ఫాంట్ పరిమాణాలను కలిగి ఉంటుంది. ఇది చిన్న స్క్రీన్‌లలో చిన్నదిగా, మధ్యస్థ స్క్రీన్‌లలో మధ్యస్థ పరిమాణంలో మరియు పెద్ద స్క్రీన్‌లలో పెద్దదిగా ఉంటుంది. < / p >
< / div >
< / శరీరం >
ఈ కోడ్‌లో:
- ' bg-slate-500 ” నేపథ్య రంగును బూడిద రంగుకు సెట్ చేస్తుంది.
- ' టెక్స్ట్-పసుపు-300 ” వచన రంగును పసుపు రంగులోకి మారుస్తుంది.
- ' p-4 ” 4px యొక్క పాడింగ్‌ని జోడిస్తుంది.
- ' lg: p-8' పెద్ద స్క్రీన్‌లపై 8px ప్యాడింగ్‌ని జోడిస్తుంది.
- ప్రారంభ స్థానం 'ని ఉపయోగించి మాతృ పేజీకి సంబంధించి సెట్ చేయబడింది బంధువు ” తరగతి.
- ' md:text-lg ” మీడియం-సైజ్ స్క్రీన్‌పై వచనాన్ని పెద్దదిగా చేస్తుంది.
- 'md: సంపూర్ణ' మీడియం-సైజ్ స్క్రీన్‌పై టెక్స్ట్ యొక్క స్థానాన్ని సాపేక్ష నుండి సంపూర్ణంగా మారుస్తుంది.
- ' md:translate-x-4” మరియు “md:translate-y-4” మీడియం స్క్రీన్ పరిమాణంలో వచనాన్ని 4px క్రిందికి మరియు కుడి వైపుకు తరలించండి.
- ' lg:text-xl ” పెద్ద-పరిమాణ స్క్రీన్‌పై టెక్స్ట్ పరిమాణాన్ని అదనపు పెద్దదిగా మారుస్తుంది.
- ' lg: స్టాటిక్ ” పేరెంట్ పేజీకి సంబంధించి టెక్స్ట్ స్థానాన్ని పెద్ద-పరిమాణ స్క్రీన్‌పై సంపూర్ణ నుండి స్టాటిక్‌కు మారుస్తుంది
- ' lg:translate-x-4 'మరియు' lg:translate-y-4 ” పెద్ద స్క్రీన్ పరిమాణంలో 4px వచనాన్ని క్రిందికి మరియు కుడి వైపుకు తరలించండి.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
ఎగువ కోడ్ ద్వారా సృష్టించబడిన వెబ్‌పేజీని పరిదృశ్యం చేయండి మరియు మార్పుని చూడటానికి స్క్రీన్ పరిమాణాన్ని సర్దుబాటు చేయండి:
మీడియం మరియు పెద్ద స్క్రీన్ పరిమాణాలలో టెక్స్ట్ ప్రతిస్పందించే ప్రవర్తనను చూపుతుందని చూడవచ్చు.
ముగింపు
Tailwindలో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఉపయోగించడానికి బ్రేక్‌పాయింట్‌ను వర్తింపజేయండి మరియు ప్రతి బ్రేక్‌పాయింట్‌కు మీడియా ప్రశ్నను సెట్ చేయండి మరియు స్క్రీన్‌లోని వివిధ బ్రేక్‌పాయింట్‌లలో స్థాన లక్షణాన్ని కూడా మార్చండి. డిఫాల్ట్ బ్రేక్‌డౌన్‌లు ' sm ',' md ',' lg ', మరియు' xl ”. ఈ బ్లాగ్ Tailwindలో స్థానం ప్రాపర్టీతో బ్రేక్‌పాయింట్ మరియు మీడియా ప్రశ్నను ఎలా ఉపయోగించాలో చూపింది.