ఈ కథనం ఉపయోగించి HTML మరియు CSSలో ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను రూపొందించడానికి దశలను ప్రదర్శిస్తుంది:
- వ్యూపోర్ట్ మెటా ట్యాగ్
- ప్రతిస్పందించే చిత్రాలు
- ఫ్లెక్స్‌బాక్స్ లేఅవుట్
- గ్రిడ్ లేఅవుట్
- మీడియా ప్రశ్నలు
HTML మరియు CSSతో ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను ఎలా సృష్టించాలి?
HTML మరియు CSSతో ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను సృష్టించడం అనేది విభిన్న స్క్రీన్ పరిమాణాలు మరియు రిజల్యూషన్‌లకు అనుగుణంగా ఉండే లేఅవుట్‌ను రూపొందించడం. ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను రూపొందించడానికి మీరు అనుసరించగల దశలు ఇక్కడ ఉన్నాయి:
దశ 1: వ్యూపోర్ట్ మెటా ట్యాగ్
ది ' వీక్షణపోర్ట్ ప్రతిస్పందించే వెబ్ డిజైన్‌ను రూపొందించడంలో మెటా ట్యాగ్ కీలక పాత్ర పోషిస్తుంది. ఇది లోపల చొప్పించబడింది ' <తల> కింది లక్షణాలను కలిగి ఉన్న HTML ఫైల్ యొక్క ”ట్యాగ్:
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు = పరికరం-వెడల్పు, ప్రారంభ-స్థాయి = 1' / >
పై మెటా ట్యాగ్ రెండు లక్షణాలను కలిగి ఉంది:
- ది ' పేరు ” లక్షణం ఈ ట్యాగ్ సృష్టించబడిన/ఉపయోగించబడిన కార్యాచరణ పేరును తెలియజేస్తుంది. ఉదాహరణకు, 'ని సెట్ చేయండి వీక్షణపోర్ట్ ' కు ' పేరు 'వివిధ పరికరాల వీక్షణపోర్ట్‌తో వ్యవహరించే లక్షణం.
- ది ' విషయము ” లక్షణం మునుపటి లక్షణ విలువను నిర్వచిస్తుంది. ఇది ప్రతి పరికరం యొక్క వెడల్పును సెట్ చేస్తుంది మరియు పత్రం/వెబ్‌పేజీని 100%కి స్కేల్ చేస్తుంది.
దశ 2: ప్రతిస్పందించే చిత్రాలు
చిత్రం పరిమాణం ఒకదానికొకటి మారుతూ ఉంటుంది కాబట్టి, అదే విధంగా సెట్ చేయడం కష్టం ' ఎత్తు 'లేదా' వెడల్పు ”ప్రతి చిత్రానికి ఆస్తి. చిత్రం యొక్క పరిమాణం స్థిరంగా ఉన్నప్పుడు వినియోగదారులు వెబ్‌పేజీ చిత్రాన్ని స్క్రీన్‌తో పరిమాణాన్ని మార్చరు. అయితే, వినియోగదారులు కింది కోడ్ ద్వారా ప్రతిస్పందించే చిత్రాన్ని సెట్ చేయవచ్చు:
img {
గరిష్టంగా- వెడల్పు : 100 %;
}
ది ' గరిష్ట వెడల్పు ” CSS ప్రాపర్టీ ఇమేజ్ దాని కేటాయించిన స్థలంలో ప్రదర్శించకుండా నియంత్రిస్తుంది. '%'లో విలువను సెట్ చేయడం ద్వారా, చిత్రం దాని పేరెంట్ ఎలిమెంట్ పరిమాణంతో పాటుగా పరిమాణం మార్చబడుతుంది. ఇది చిత్రం కోసం ప్రతిస్పందించే ప్రభావాన్ని సృష్టిస్తుంది.
దశ 3: ఫ్లెక్స్‌బాక్స్ లేఅవుట్
Flexbox లేఅవుట్ ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను రూపొందించడానికి బాగా సిఫార్సు చేయబడింది. ఇది HTML మూలకాలను ఒక నిర్దిష్ట స్థానంలో ప్రదర్శించడానికి మరియు పేరెంట్ డివి ద్వారా అందుబాటులో ఉన్న పరిమాణానికి అనుగుణంగా ప్రతి చిన్నారికి అందుబాటులో ఉన్న స్థలాన్ని పునఃపరిమాణం చేయడానికి అనుమతిస్తుంది. ఫ్లెక్స్‌బాక్స్ లేఅవుట్ అనేక లక్షణాలను కలిగి ఉంది, ఇవి డెవలపర్‌కు క్రింది కోడ్‌లో చాలా స్వేచ్ఛను అందిస్తాయి:
< శైలి >
.తల్లిదండ్రులు {
ప్రదర్శన: ఫ్లెక్స్;
}
.బిడ్డ {
ఫ్లెక్స్: 1 ;
వచనం- సమలేఖనం : కేంద్రం;
}
< / శైలి >
< శరీరం >
< div తరగతి = 'తల్లిదండ్రులు' >
< div తరగతి = 'పిల్ల' శైలి = 'సరిహద్దు: 3px ఘన బ్లూవైలెట్;' >స్వాగతం< / div >
< div తరగతి = 'పిల్ల' శైలి = 'సరిహద్దు: 3px ఘన ముదురు ఆకుపచ్చ;' >కు< / div >
< div తరగతి = 'పిల్ల' శైలి = 'సరిహద్దు: 3px ఘన ఎరుపు;' >Linuxin< / div >
< / div >
< / శరీరం >
పై కోడ్ స్నిప్పెట్‌లో:
- ముందుగా, ' అనే ఐడితో పేరెంట్ డివివ్ మూలకాన్ని సృష్టించండి తల్లిదండ్రులు 'లోపల' <బాడీ> ” ట్యాగ్.
- తర్వాత, బహుళ చైల్డ్ డివివ్ ఎలిమెంట్లను సృష్టించండి మరియు వారికి '' తరగతిని కేటాయించండి బిడ్డ ”.
- అప్పుడు, 'ని ఎంచుకోండి తల్లిదండ్రులు 'తరగతి మరియు విలువను అందించండి' ఫ్లెక్స్ 'CSS కోసం' ప్రదర్శన ”ఆస్తి.
- ఆ తర్వాత, '' విలువను అందించండి 1 ' కు ' ఫ్లెక్స్ 'ప్రతి ఒక్కరికీ ఆస్తి' బిడ్డ ” క్లాస్ చైల్డ్ ఎలిమెంట్‌ని ఫ్లెక్స్‌గా ప్రదర్శించేలా చేస్తుంది.
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
బ్రౌజర్ పరిమాణాన్ని మార్చినప్పుడు చైల్డ్ ఎలిమెంట్ సమాన వెడల్పును పొందుతున్నట్లు ఎగువ అవుట్‌పుట్ ప్రదర్శిస్తుంది.
దశ 4: గ్రిడ్ లేఅవుట్
గ్రిడ్ లేఅవుట్ ఒక గ్రిడ్‌ను సృష్టిస్తుంది మరియు గ్రిడ్ భాగం లోపల HTML మూలకాలను కేటాయిస్తుంది. వెబ్‌పేజీ స్క్రీన్ పరిమాణానికి సంబంధించి గ్రిడ్ మూలకాలు మారుతాయి. పరికర స్క్రీన్‌కు అనుగుణంగా HTML మూలకం పరిమాణం మారినప్పుడు ఇది ప్రతిస్పందించే డిజైన్‌ను సృష్టిస్తుంది:
< శైలి >.కంటైనర్ {
ప్రదర్శన: గ్రిడ్;
గ్రిడ్-టెంప్లేట్-నిలువు వరుసలు: 1fr 1fr 1fr;
}
< / శైలి >
< శరీరం >
< div తరగతి = 'భాగం' >
< div శైలి = 'సరిహద్దు: 3px సాలిడ్ ఫారెస్ట్ గ్రీన్;' >Linuxin< / div >
< div శైలి = 'సరిహద్దు: 3px ఘన ముదురు ఆకుపచ్చ;' >Linuxin< / div >
< div శైలి = 'సరిహద్దు: 3px ఘన ఎరుపు;' >Linuxin< / div >
< / div >
< / శరీరం >
పై కోడ్‌లో:
- ముందుగా, పేరెంట్ డివిని క్రియేట్ చేసి, దానికి '' తరగతిని కేటాయించండి భాగం 'లోపల' <బాడీ> ” ట్యాగ్. ఆ తరువాత, దానిలో మూడు చైల్డ్ డివివ్ ఎలిమెంట్లను సృష్టించండి.
- అప్పుడు, CSS ఫైల్‌లో “ని కేటాయించండి గ్రిడ్ ' విలువ ' ప్రదర్శన 'కోసం ఆస్తి' కంటైనర్ ” div.
- ఆ తర్వాత, ''ని ఉపయోగించి వెబ్‌పేజీలో మూడు సమాన పరిమాణ భాగాలను సృష్టించండి గ్రిడ్-టెంప్లేట్-కాలమ్ 'ఆస్తి మరియు దానికి సమానంగా సెట్ చేయండి' 1fr 1fr 1fr 'ఎక్కడ fr అంటే' భిన్నం ”.
పై కోడ్‌ను కంపైల్ చేసిన తర్వాత, అవుట్‌పుట్ ఇలా కనిపిస్తుంది:
సమాన నిష్పత్తిలో స్క్రీన్ పరిమాణం ప్రకారం divలు తమను తాము మార్చుకుంటున్నాయని అవుట్‌పుట్ ప్రదర్శిస్తుంది.
దశ 5: మీడియా ప్రశ్నలు
ప్రతిస్పందించే డిజైన్‌ను రూపొందించడానికి మీడియా ప్రశ్నలను ఉపయోగించడం అనేది ఒక రకమైన పాత పాఠశాల విషయం అయినప్పటికీ, చాలా వెబ్‌సైట్‌లు మీడియా ప్రశ్నలను ఉపయోగిస్తాయి. ఎంచుకున్న HTML మూలకం కోసం డిఫాల్ట్ శైలిని జోడించిన తర్వాత మీడియా ప్రశ్నలను నేరుగా CSS ఫైల్‌లో జోడించవచ్చు. మీడియా ప్రశ్న కోడ్‌ని కొంచెం పొడవుగా మరియు గజిబిజిగా చేస్తుంది. ఎందుకంటే డెవలపర్ ప్రతి స్క్రీన్ పరిమాణానికి విడిగా కోడ్‌ని ఇన్సర్ట్ చేయాలి.
ఉదాహరణకు, దిగువ కోడ్ స్నిప్పెట్‌ని చూడండి:
@ మీడియా స్క్రీన్ మరియు ( నిమి- వెడల్పు : 640px ) {.భాగం {
నేపథ్య- రంగు ఫారెస్ట్ గ్రీన్;
}
}
పై కోడ్ స్నిప్పెట్‌లో:
- ముందుగా, ఎంచుకున్న మూలకం తరగతికి CSS లక్షణాలను వర్తించే మీడియా ప్రశ్నను సెట్ చేయండి “ భాగం 'స్క్రీన్ పరిమాణం వెడల్పు' కంటే ఎక్కువగా ఉన్నప్పుడు 640px ”.
- తరువాత, “కాంపోనెంట్ క్లాస్‌ని ఎంచుకుని, దాని విలువను సెట్ చేయండి” అటవీ ఆకుపచ్చ ' కొరకు ' నేపథ్య రంగు ”ఆస్తి.
.భాగం {
నేపథ్య- రంగు : డాడ్జర్బ్లూ;
}
}
ఆపై పై కోడ్ స్నిప్పెట్ కోసం:
- వెడల్పు పరిమాణం ' కంటే తక్కువగా ఉన్నప్పుడు శైలులను వర్తింపజేయడానికి మీడియా ప్రశ్నను సెట్ చేయండి 1000px ”.
- ఇప్పుడు, 'ని ఎంచుకోండి భాగం 'తరగతి మరియు విలువను అందించండి' డాడ్జర్బ్లూ ' కొరకు ' నేపథ్య రంగు 'ఆస్తి:
పై కోడ్ స్నిప్పెట్‌లను అమలు చేసిన తర్వాత, అవుట్‌పుట్ ఇలా కనిపిస్తుంది:
మీడియా ప్రశ్న స్క్రీన్ పరిమాణం ఆధారంగా నేపథ్యాన్ని మారుస్తోందని అవుట్‌పుట్ ప్రదర్శిస్తుంది. అదే నమూనాను అనుసరించడం ద్వారా ఫాంట్ పరిమాణం, వెడల్పు, ఎత్తు మరియు ఇతర CSS లక్షణాలను కూడా వర్తింపజేయవచ్చు.
మీడియా ప్రశ్నలను ఉపయోగిస్తున్నప్పుడు పరిగణించవలసిన సాధ్యం బ్రేక్‌పాయింట్ స్క్రీన్ పరిమాణాలు:
- కోసం ' చిన్నది 'స్క్రీన్ పరిమాణం, వెడల్పు' కంటే చిన్నదిగా సెట్ చేయండి 640px ”.
- కోసం ' మధ్యస్థ 'వ్యూపోర్ట్ స్క్రీన్ పరిమాణం, వెడల్పు పరిధి' మధ్య ఉంటుంది 641px 'మరియు' 1007px ”.
- కోసం ' పెద్ద 'స్క్రీన్ పరిమాణం, వెడల్పును సెట్ చేయండి' 1008px ”లేదా అంతకంటే ఎక్కువ.
ముగింపు
ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ను రూపొందించడానికి, డెవలపర్‌లు ''ని జోడించాలి వీక్షణపోర్ట్ 'లో' ట్యాగ్ <తల> ” ట్యాగ్ విభాగం. తరువాత, 'ని ఉపయోగించండి ఫ్లెక్స్‌బాక్స్ 'మరియు' గ్రిడ్ ” లేఅవుట్. ఈ లేఅవుట్ మాడ్యూల్స్ ప్రతిస్పందించే డిజైన్‌ను రూపొందించడంలో సహాయపడతాయి. చివరికి, ' మీడియా ప్రశ్నలు ” విభిన్న స్క్రీన్ పరిమాణాల కోసం ఒకే వెబ్‌సైట్ యొక్క విభిన్న వెర్షన్‌లను స్టైల్ చేయడానికి డెవలపర్‌కు సహాయం చేయండి. ప్రతిస్పందించే వెబ్‌సైట్ డిజైన్‌ని సృష్టించే దశలను ఈ కథనం ప్రదర్శించింది.