రెస్పాన్సివ్ వెబ్‌సైట్‌లను సృష్టించడానికి HTML మరియు CSS లో మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి

రెస్పాన్సివ్ వెబ్‌సైట్‌లను సృష్టించడానికి HTML మరియు CSS లో మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి

మీరు వెబ్‌సైట్‌లు/వెబ్ అప్లికేషన్‌లను అభివృద్ధి చేయాలనుకుంటే, ప్రతిస్పందించే డిజైన్‌లను ఎలా సృష్టించాలో తెలుసుకోవడం మీ విజయానికి అవసరం.





గతంలో, విభిన్న స్క్రీన్ పరిమాణాలకు అనుగుణంగా ఉండే వెబ్‌సైట్‌లను రూపొందించడం అనేది వెబ్‌సైట్ యజమానులు డెవలపర్ నుండి అభ్యర్థించాల్సిన లగ్జరీ. ఏదేమైనా, స్మార్ట్‌ఫోన్‌లు మరియు టాబ్లెట్‌ల వినియోగం పెరగడం ఇప్పుడు సాఫ్ట్‌వేర్ డెవలప్‌మెంట్ ప్రపంచంలో ప్రతిస్పందించే డిజైన్‌ను ఒక ఆవశ్యకంగా మార్చింది.



మీ వెబ్‌సైట్/వెబ్ యాప్ ప్రతి పరికరంలో మీకు ఎలా కావాలో ఖచ్చితంగా కనిపించేలా మీడియా ప్రశ్నలను ఉపయోగించడం ఉత్తమ మార్గం.





రెస్పాన్సివ్ డిజైన్‌ని అర్థం చేసుకోవడం

ఒక్కమాటలో చెప్పాలంటే, వివిధ స్క్రీన్ సైజులకు అనుగుణంగా వెబ్‌సైట్/వెబ్ యాప్ లేఅవుట్‌ను రూపొందించడానికి HTML/CSS ఉపయోగించి ప్రతిస్పందించే డిజైన్ వ్యవహరిస్తుంది. HTML/CSS లో వెబ్‌సైట్ డిజైన్‌లో ప్రతిస్పందనను సాధించడానికి కొన్ని విభిన్న మార్గాలు ఉన్నాయి:

  • పిక్సెల్‌లకు బదులుగా రెమ్ మరియు ఎమ్ యూనిట్‌లను ఉపయోగించడం (px)
  • ప్రతి వెబ్‌పేజీ యొక్క వీక్షణపోర్ట్/స్కేల్‌ను సెట్ చేస్తోంది
  • మీడియా ప్రశ్నలను ఉపయోగించడం

మీడియా ప్రశ్నలు ఏమిటి?

CSS3 వెర్షన్‌లో విడుదల చేయబడిన CSS యొక్క లక్షణం మీడియా ప్రశ్న. ఈ కొత్త ఫీచర్ ప్రవేశపెట్టడంతో CSS యొక్క వినియోగదారులు పరికరం/స్క్రీన్ ఎత్తు, వెడల్పు మరియు ధోరణి (ల్యాండ్‌స్కేప్ లేదా పోర్ట్రెయిట్ మోడ్) ఆధారంగా వెబ్‌పేజీ డిస్‌ప్లేను సర్దుబాటు చేయగల సామర్థ్యాన్ని పొందుతారు.



మరింత చదవండి: ఎసెన్షియల్ CSS3 ప్రాపర్టీస్ చీట్ షీట్

మీ ప్రోగ్రామ్ అంతటా కోడ్‌ను సృష్టించడానికి మరియు అనేకసార్లు ఉపయోగించడానికి మీడియా ప్రశ్నలు ఒక ఫ్రేమ్‌వర్క్‌ను అందిస్తాయి. మీరు కేవలం మూడు వెబ్ పేజీలతో ఒక వెబ్‌సైట్‌ను అభివృద్ధి చేస్తుంటే ఇది అంత సహాయకరంగా అనిపించకపోవచ్చు, కానీ మీరు వందలాది విభిన్న వెబ్ పేజీలతో ఒక కంపెనీ కోసం పని చేస్తుంటే -ఇది భారీ టైమ్ సేవర్ అని రుజువు అవుతుంది.



మీడియా ప్రశ్నలను ఉపయోగించడం

మీడియా ప్రశ్నలను ఉపయోగిస్తున్నప్పుడు మీరు పరిగణనలోకి తీసుకోవలసిన అనేక విభిన్న విషయాలు ఉన్నాయి: నిర్మాణం, ప్లేస్‌మెంట్, పరిధి మరియు లింక్ చేయడం.

మీడియా ప్రశ్నల నిర్మాణం

మీడియా ప్రశ్న నిర్మాణానికి ఉదాహరణ


@media only/not media-type and (expression){
/*CSS code*/
}

మీడియా ప్రశ్న యొక్క సాధారణ నిర్మాణం వీటిని కలిగి ఉంటుంది:



  • @మీడియా కీవర్డ్
  • కాదు/మాత్రమే కీవర్డ్
  • మీడియా రకం (ఇది స్క్రీన్, ప్రింట్ లేదా స్పీచ్ కావచ్చు)
  • కీవర్డ్ మరియు
  • కుండలీకరణాలలో ఉన్న ఒక ప్రత్యేకమైన వ్యక్తీకరణ
  • CSS కోడ్ ఒక జత ఓపెన్ మరియు క్లోజ్ గిరజాల బ్రేస్‌లతో జతచేయబడింది.

సంబంధిత: ముద్రణ కోసం పత్రాలను ఫార్మాట్ చేయడానికి CSS ని ఉపయోగించడం

ఏకైక కీవర్డ్‌తో మీడియా ప్రశ్నకు ఉదాహరణ


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

పై ఉదాహరణ CSS స్టైలింగ్ (ప్రత్యేకంగా నీలిరంగు నేపథ్య రంగు) 450px వెడల్పు కలిగిన పరికర స్క్రీన్‌లకు మాత్రమే వర్తిస్తుంది - కాబట్టి ప్రాథమికంగా స్మార్ట్‌ఫోన్‌లు. కీవర్డ్‌ని మాత్రమే కీవర్డ్‌తో భర్తీ చేయవచ్చు, ఆపై మీడియా ప్రశ్నలోని CSS స్టైలింగ్ ప్రింట్ మరియు స్పీచ్‌కు మాత్రమే వర్తిస్తుంది.

ఏదేమైనా, డిఫాల్ట్‌గా, ఒక సాధారణ మీడియా ప్రశ్న ప్రకటన మూడు మీడియా రకాల్లోనూ వర్తిస్తుంది కాబట్టి వాటిలో ఒకటి లేదా అంతకంటే ఎక్కువ వాటిని మినహాయించడమే తప్ప మీడియా రకాన్ని పేర్కొనాల్సిన అవసరం లేదు.

డిఫాల్ట్ మీడియా ప్రశ్న ఉదాహరణ


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

మీడియా ప్రశ్నల నియామకం

మీడియా ప్రశ్న అనేది CSS ఆస్తి; కనుక ఇది స్టైలింగ్ భాషలో మాత్రమే ఉపయోగించబడుతుంది. మీ కోడ్‌లో CSS ని చేర్చడానికి మూడు విభిన్న మార్గాలు ఉన్నాయి; అయితే, మీ ప్రోగ్రామ్‌లలో మీడియా ప్రశ్నలను చేర్చడానికి ఆ రెండు పద్ధతులు మాత్రమే ఆచరణాత్మక మార్గాన్ని అందిస్తాయి -అంతర్గత లేదా బాహ్య CSS.

అంతర్గత పద్ధతిలో HTML ఫైల్ యొక్క ట్యాగ్‌కు ట్యాగ్‌ను జోడించడం మరియు ట్యాగ్ యొక్క పారామీటర్‌లలో మీడియా ప్రశ్నను సృష్టించడం ఉంటాయి.

బాహ్య పద్ధతి అనేది బాహ్య CSS ఫైల్‌లో మీడియా ప్రశ్నను సృష్టించడం మరియు దానిని మీ HTML ఫైల్‌కి ట్యాగ్ ద్వారా లింక్ చేయడం.

మీడియా ప్రశ్నల పరిధి

మీడియా ప్రశ్నలు అంతర్గత లేదా బాహ్య CSS ద్వారా ఉపయోగించినా, మీడియా ప్రశ్న ఎలా పనిచేస్తుందో ప్రతికూలంగా ప్రభావితం చేసే స్టైలింగ్ భాషలో ఒక ప్రధాన అంశం ఉంది. CSS కి ప్రాధాన్యత నియమ క్రమం ఉంది. CSS సెలెక్టర్‌ని ఉపయోగిస్తున్నప్పుడు, లేదా ఈ సందర్భంలో మీడియా ప్రశ్న, CSS ఫైల్‌కు జోడించిన ప్రతి కొత్త మీడియా ప్రశ్న ముందు వచ్చినదానిని భర్తీ చేస్తుంది (లేదా ప్రాధాన్యతనిస్తుంది).

మా పైన ఉన్న డిఫాల్ట్ మీడియా ప్రశ్న కోడ్ స్మార్ట్‌ఫోన్‌లను లక్ష్యంగా పెట్టుకుంది (450px వెడల్పు మరియు కింద), కాబట్టి మీరు టాబ్లెట్‌ల కోసం వేరే నేపథ్యాన్ని సెట్ చేయాలనుకుంటే, మీరు ముందుగా ఉన్న CSS ఫైల్‌కు కింది కోడ్‌ను జోడించవచ్చని అనుకోవచ్చు.

టాబ్లెట్ మీడియా ప్రశ్న ఉదాహరణ


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

ఒకే సమస్య ఏమిటంటే, ప్రాధాన్యత క్రమం కారణంగా, టాబ్లెట్‌లు ఎరుపు నేపథ్య రంగును కలిగి ఉంటాయి మరియు స్మార్ట్‌ఫోన్‌లు ఇప్పుడు ఎరుపు నేపథ్య రంగును కలిగి ఉంటాయి ఎందుకంటే 450px మరియు అంతకంటే తక్కువ 800px కంటే తక్కువ.

ఈ చిన్న సమస్యను పరిష్కరించడానికి ఒక మార్గం ఏమిటంటే స్మార్ట్‌ఫోన్‌ల ముందు టాబ్లెట్‌ల కోసం మీడియా ప్రశ్నను జోడించడం; రెండోది మునుపటి వాటిని భర్తీ చేస్తుంది మరియు ఇప్పుడు నీలిరంగు బ్యాక్‌గ్రౌండ్ కలర్‌తో స్మార్ట్‌ఫోన్‌లు మరియు ఎరుపు బ్యాక్‌గ్రౌండ్ కలర్‌తో టాబ్లెట్‌లు ఉంటాయి.

అయితే, ప్రాధాన్యత క్రమంలో ఆందోళన చెందకుండా స్మార్ట్‌ఫోన్‌లు మరియు టాబ్లెట్‌ల కోసం ప్రత్యేక స్టైలింగ్ సాధించడానికి ఒక మంచి మార్గం ఉంది. ఇది రేంజ్ స్పెసిఫికేషన్ అని పిలువబడే మీడియా ప్రశ్నల లక్షణం, ఇక్కడ డెవలపర్ గరిష్ట మరియు కనిష్ట వెడల్పు (పరిధి) తో మీడియా ప్రశ్నను సృష్టించవచ్చు.

రేంజ్ ఉదాహరణతో టాబ్లెట్ మీడియా ప్రశ్న


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

పై ఉదాహరణతో స్టైల్‌షీట్‌లో మీడియా ప్రశ్నల ప్లేస్‌మెంట్ అసంబద్ధం అవుతుంది, ఎందుకంటే టాబ్లెట్‌లు మరియు స్మార్ట్‌ఫోన్‌ల కోసం డిజైన్ రెండు వేర్వేరు వెడల్పు సేకరణలను లక్ష్యంగా చేసుకుంటుంది.

మీరు మీ CSS కోడ్‌లో మీడియా ప్రశ్నలను పొందుపరచకూడదనుకుంటే, మీరు ఉపయోగించగల ప్రత్యామ్నాయ పద్ధతి ఉంది. ఈ పద్ధతి ఒక HTML ఫైల్ యొక్క ట్యాగ్‌లో మీడియా ప్రశ్నలను ఉపయోగించడాన్ని కలిగి ఉంటుంది, కాబట్టి స్మార్ట్‌ఫోన్‌లు, టాబ్లెట్‌లు మరియు కంప్యూటర్‌ల కోసం స్టైలింగ్ ప్రాధాన్యతలను కలిగి ఉన్న ఒక భారీ స్టైల్‌షీట్‌ను కలిగి ఉండటానికి బదులుగా -మీరు మూడు వేర్వేరు CSS ఫైల్‌లను ఉపయోగించవచ్చు మరియు మీ మీడియా ప్రశ్నలను ట్యాగ్‌లో సృష్టించవచ్చు.

ట్యాగ్ అనేది ఒక HTML మూలకం, ఇది బాహ్య స్టైల్‌షీట్ నుండి CSS స్టైలింగ్‌ను దిగుమతి చేయడానికి ఉపయోగించబడుతుంది. ఈ ట్యాగ్‌లో మీడియా ఆస్తి ఉంది, ఇది CSS లో మీడియా ప్రశ్న వలె పనిచేస్తుంది.




href='tablet.css'>


పైన ఉన్న కోడ్ మీ HTML ఫైల్ యొక్క ట్యాగ్‌లో ఉంచాలి. ఇప్పుడు మీరు చేయాల్సిందల్లా main.css, tablet.css, మరియు smartphone.css అనే ఫైల్ పేర్లతో మూడు వేర్వేరు CSS ఫైల్‌లను సృష్టించడం -తర్వాత ప్రతి పరికరం కోసం మీకు కావలసిన నిర్దిష్ట డిజైన్‌ను సృష్టించండి.

ప్రధాన ఫైల్‌లోని స్టైల్ 800px కంటే ఎక్కువ వెడల్పు ఉన్న అన్ని స్క్రీన్‌లకు వర్తిస్తుంది, టాబ్లెట్ ఫైల్‌లోని స్టైల్ 450px మరియు 801px మధ్య వెడల్పు ఉన్న అన్ని స్క్రీన్‌లకు వర్తిస్తుంది మరియు స్మార్ట్‌ఫోన్ ఫైల్‌లోని స్టైల్ క్రింద ఉన్న అన్ని స్క్రీన్‌లకు వర్తిస్తుంది 451px.

ఐఫోన్ 12 ప్రో మరియు ప్రో గరిష్టాలను సరిపోల్చండి

ఇప్పుడు మీరు రెస్పాన్సివ్ డిజైన్‌లను రూపొందించడానికి సాధనాలను కలిగి ఉన్నారు

మీరు ఈ ఆర్టికల్ చివరలో చేసినట్లయితే, మీరు రెస్పాన్సివ్ డిజైన్ అంటే ఏమిటో మరియు ఎందుకు ఉపయోగకరంగా ఉంటుందో తెలుసుకోగలిగారు. మీరు ఇప్పుడు CSS మరియు HTML ఫైల్‌లలో మీడియా ప్రశ్నలను గుర్తించి ఉపయోగించవచ్చు. అదనంగా, మీరు CSS లో ప్రాధాన్యత క్రమంలో పరిచయం చేయబడ్డారు మరియు మీ మీడియా ప్రశ్నలు ఎలా పనిచేస్తాయో అది ఎలా ప్రభావితం చేస్తుందో చూశారు.

చిత్ర క్రెడిట్: ప్రతికూల స్థలం/ పెక్సెల్స్

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ CSS లో నేపథ్య చిత్రాన్ని ఎలా సెట్ చేయాలి

వెబ్ పేజీలను స్టైలింగ్ చేయడానికి CSS ఒక శక్తివంతమైన సాధనం. నేపథ్య చిత్రాన్ని ఎలా ఉంచాలో నేర్చుకోవడం మీకు చాలా CSS ప్రాథమికాలను నేర్పుతుంది.

తదుపరి చదవండి సంబంధిత అంశాలు
  • ప్రోగ్రామింగ్
  • వెబ్ అభివృద్ధి
  • వెబ్ డిజైన్
  • CSS
రచయిత గురుంచి కదీషా కీన్(21 కథనాలు ప్రచురించబడ్డాయి)

కదీషా కీన్ పూర్తి-స్టాక్ సాఫ్ట్‌వేర్ డెవలపర్ మరియు టెక్నికల్/టెక్నాలజీ రైటర్. ఆమె చాలా క్లిష్టమైన సాంకేతిక భావనలను సరళీకృతం చేసే ప్రత్యేక సామర్థ్యాన్ని కలిగి ఉంది; ఏదైనా సాంకేతిక అనుభవం లేని వ్యక్తి సులభంగా అర్థం చేసుకోగల పదార్థాన్ని ఉత్పత్తి చేయడం. ఆమె రాయడం, ఆసక్తికరమైన సాఫ్ట్‌వేర్‌ను అభివృద్ధి చేయడం మరియు ప్రపంచాన్ని పర్యటించడం (డాక్యుమెంటరీల ద్వారా) పట్ల మక్కువ చూపుతుంది.

కదీషా కీన్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి