మీడియా ప్రశ్నలను అమలు చేయడానికి అవసరమైన మార్గదర్శకాలను ఈ పోస్ట్ ప్రస్తావిస్తుంది.
మొబైల్ పరికరాల కోసం మీడియా ప్రశ్నలను ఎలా అమలు చేయాలి?
మీడియా ప్రశ్నను ''ని పేర్కొనడం ద్వారా మొబైల్ పరికరాలకు అన్వయించవచ్చు @మీడియా ” ట్యాగ్ చేసి, చిన్న జంట కలుపులలో స్క్రీన్ పరిమాణాన్ని పేర్కొనడం. ఆ మీడియా ప్రశ్న కోసం CSSని కర్లీ బ్రేస్‌ల లోపల జోడించవచ్చు. స్క్రీన్ పరిమాణం వినియోగదారు పేర్కొన్న పరిమాణానికి అనుగుణంగా ఉన్నప్పుడు, అది పేర్కొన్న మీడియా ప్రశ్నను వర్తింపజేస్తుంది.
మొబైల్ పరికరాల కోసం మీడియా ప్రశ్నల అమలును తెలుసుకోవడానికి ఒక ఆచరణాత్మక ఉదాహరణను పరిశీలిద్దాం.
ఉదాహరణ: మీడియా ప్రశ్నలను వర్తింపజేయడం ద్వారా రెండు కాలమ్ లేఅవుట్ నుండి ఒక కాలమ్ లేఅవుట్‌కు మార్చే లేఅవుట్‌ను సృష్టించండి
దిగువ ఉదాహరణలో, వెబ్ పేజీ యొక్క లేఅవుట్ కాలమ్ లేఅవుట్ నుండి సింగిల్-కాలమ్ లేఅవుట్‌కి మారుతుంది:
దశ 1: HTML నిర్మాణాన్ని సృష్టించండి
- ముందుగా, ఒక HTML ఫైల్‌ను సృష్టించండి మరియు దానిలో బాహ్య CSS స్టైల్‌షీట్ ఫైల్‌ను లింక్ చేయండి <తల> విభాగం.
- అప్పుడు, a సృష్టించు <హెడర్> విభాగాన్ని ఉపయోగించి వెబ్‌సైట్ శీర్షికను జోడించండి ట్యాగ్.
- సృష్టించు a 'కంటైనర్-క్లాస్' యొక్క తరగతి పేరు మరియు దాని లోపల మరో రెండుతరగతి పేరు '' కాలమ్ ”. < శరీరం >
<హెడర్>
< h1 > Linux సూచన < / h1 >
< / శీర్షిక>
< div తరగతి = 'కంటైనర్-క్లాస్' >
< div తరగతి = 'కాలమ్' >
< h2 > విభాగం ఒకటి < / h2 >
< p > Linux సూచన ఉత్తమ ఇ-లెర్నింగ్ ప్లాట్‌ఫారమ్‌లలో ఒకటి. < / p >
< / div >
< div తరగతి = 'కాలమ్' >
< h2 > విభాగం రెండు < / h2 >
< p > Linux సూచన ఉత్తమ ఇ-లెర్నింగ్ ప్లాట్‌ఫారమ్‌లలో ఒకటి. < / p >
< / div >
< / div >
< / శరీరం >దశ 2: CSSని వర్తింపజేయండి
శరీర విభాగంలో:- ముందుగా, '' అని వ్రాయడం ద్వారా శరీర విభాగాన్ని పేర్కొనండి శరీరం ” ట్యాగ్ చేసి, కర్లీ బ్రేస్‌లను ప్రస్తావిస్తోంది.
- కలుపుల లోపల, ఫాంట్ కుటుంబం, నేపథ్య రంగు, మార్జిన్ మరియు పాడింగ్‌ను పేర్కొనండి.
న <హెడర్> విభాగం:
- వచన రంగు, వచన అమరిక, నేపథ్య రంగు మరియు పాడింగ్‌ను పేర్కొనండి.
న 'కంటైనర్-క్లాస్' శాఖ:
- ఏర్పరచు ' ప్రదర్శన 'ఆస్తి విలువ' ఫ్లెక్స్ ” ఫ్లెక్స్‌బాక్స్‌ని సృష్టించడానికి.
- ఉపయోగించడానికి ' జస్టిఫై-కంటెంట్ ” కంటెంట్ మధ్య ఖాళీని జోడించడానికి మరియు పాడింగ్‌ని జోడించడానికి.
నిలువు తరగతిపై:
- ముందుగా, పేర్కొన్న విలువను పేర్కొనండి ' ఫ్లెక్స్ 'రెండు లేఅవుట్ విభాగాల మధ్య ఖాళీని జోడించడానికి ఆస్తి.
- ఆ తర్వాత, బ్యాక్‌గ్రౌండ్ కలర్, బార్డర్, ప్యాడింగ్ మరియు బాక్స్-సైజింగ్‌ని జోడించండి.
దశ 3: మీడియా ప్రశ్నను వర్తింపజేయండి
- మొబైల్ పరికరాల కోసం మీడియా ప్రశ్నను వర్తింపజేయడానికి, ముందుగా, ' @మీడియా ” ట్యాగ్.
- అప్పుడు, విలువను పేర్కొనండి ' 768px 'ఇది మొబైల్ పరికరాలకు విలక్షణమైనది' గరిష్ట వెడల్పు ”చిన్న జంట కలుపుల లోపల ఆస్తి.
- ఆ తరువాత, పేర్కొనండి ' కాలమ్ ' విలువ ' ఫ్లెక్స్-దిశ 'ఆస్తి ఇది వర్తిస్తుంది' కంటైనర్-క్లాస్' తరగతి. ఇది పేర్కొన్న స్క్రీన్ పరిమాణం గుర్తించబడినప్పుడల్లా రెండు నిలువు వరుసలను ఒక నిలువు వరుసగా మారుస్తుంది.
- చివరగా, “పై CSSని వర్తింపజేయండి కాలమ్ 'తరగతి మరియు పేర్కొనండి' మార్జిన్ 'మరియు' ఫ్లెక్స్ 'విలువలు:
ఫాంట్-కుటుంబం: సాన్స్-సెరిఫ్;
నేపథ్య- రంగు : వెండి;
అంచు: 0 ;
పాడింగ్: 0 ;
}
శీర్షిక {
నేపథ్య- రంగు : #2f4f4f;
పాడింగ్: 20px;
వచనం- సమలేఖనం : కేంద్రం;
రంగు : తెలుపు;
}
.కంటైనర్- తరగతి {
ప్రదర్శన: ఫ్లెక్స్;
న్యాయంచేయటానికి- విషయము : స్పేస్-మధ్య;
పాడింగ్: 20px;
}
.నిలువు వరుస {
ఫ్లెక్స్: 0 1 గణన ( యాభై % - 10px ) ;
సరిహద్దు : 1px ఘన ఆకుపచ్చ;
నేపథ్య- రంగు : తెలుపు;
పెట్టె పరిమాణం: సరిహద్దు పెట్టె;
పాడింగ్: 20px;
}
@ మీడియా ( గరిష్టంగా- వెడల్పు : 768px ) {
.కంటైనర్- తరగతి {
ఫ్లెక్స్-దిశ: కాలమ్;
}
.నిలువు వరుస {
ఫ్లెక్స్: 0 1 100 %;
అంచు-దిగువ: 20px;
}
}అవుట్‌పుట్
మీడియా ప్రశ్నను వర్తింపజేసిన తర్వాత వెబ్ పేజీ యొక్క అవుట్‌పుట్ ఇక్కడ ఉంది. ఈ అవుట్‌పుట్ రెండు నిలువు వరుసల ప్రతిస్పందించే లేఅవుట్:
మొబైల్ కోసం మీడియా ప్రశ్నను ఉపయోగించి స్క్రీన్ పేర్కొన్న కొలతలకు అనుగుణంగా ఉన్నప్పుడు, అది ఒక కాలమ్ లేఅవుట్‌గా మారుతుంది:
ముగింపు
మొబైల్ పరికరాల కోసం మీడియా ప్రశ్నలను అమలు చేయడానికి, ముందుగా, ' వీక్షణపోర్ట్ ' లో ' తల ” విభాగం. ఆపై, మొబైల్ డిజైన్-నిర్దిష్ట CSSని వ్రాయండి. ఆ తర్వాత, “@మీడియా” ట్యాగ్‌ని ఉపయోగించి మరియు మొబైల్ స్క్రీన్ పరిమాణాన్ని పేర్కొనడం ద్వారా మీడియా ప్రశ్నను జోడించండి. ఉదాహరణకు, టాబ్లెట్‌ల కోసం 768px మరియు మొబైల్ ఫోన్‌ల కోసం 480pxని పేర్కొనండి. ఈ కథనం మొబైల్ పరికరాల కోసం మీడియా ప్రశ్నలను అమలు చేసే విధానాన్ని వివరించింది.