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