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