శాతం విలువలను ఉపయోగించి వెబ్ బ్రౌజర్లు ప్రదర్శనను ఎలా గుర్తించాలో తెలుసుకోండి
ప్రతిస్పందించే వెబ్ డిజైన్ యొక్క చాలా మంది విద్యార్థులు వెడల్పు విలువల కోసం శాతాలు ఉపయోగించి కష్టసాధ్యమైనది. ముఖ్యంగా, బ్రౌజర్ ఆ శాతాలను లెక్కిస్తుంది ఎలా గందరగోళం ఉంది. క్రింద మీరు ఒక ప్రతిస్పందించే వెబ్ సైట్ లో వెడల్పు లెక్కల కోసం శాతాలు ఎలా పని చేస్తాయనే వివరణాత్మక వివరణను పొందుతారు.
వెడల్పు విలువలతో పిక్సెల్లను ఉపయోగించడం
మీరు వెడల్పు విలువగా పిక్సెల్లను ఉపయోగించినప్పుడు, ఫలితాలు చాలా సరళంగా ఉంటాయి. మీరు డాక్యుమెంట్ యొక్క శీర్షికలో ఒక మూలకం యొక్క వెడల్పు విలువను 100 పిక్సెల్స్ వెడల్పుకు సెట్ చేయడానికి CSS ను ఉపయోగిస్తే, ఆ మూలకం మీరు వెబ్ సైట్ యొక్క కంటెంట్ లేదా ఫూటర్లో లేదా వెడల్పులో ఉన్న 100 పిక్సెల్స్ వెడల్పుకు సెట్ చేసినట్లుగా అదే పరిమాణంలో ఉంటుంది పేజీ. పిక్సెల్లు ఒక సంపూర్ణ విలువ, కాబట్టి 100 పిక్సెళ్ళు 100 పిక్సెల్స్ మీ డాక్యుమెంట్లో ఒక మూలకం కనిపించే చోటే ఉన్నా. దురదృష్టవశాత్తు, పిక్సెల్ విలువలు అర్థం చేసుకోవడంలో సులువుగా ఉన్నప్పుడు, వారు ప్రతిస్పందించే వెబ్సైట్లలో బాగా పని చేయరు.
ఏతాన్ మార్కోటే "ప్రతిస్పందించే వెబ్ డిజైన్" అనే పదాన్ని సృష్టించాడు, ఈ పద్ధతిని 3 కీ ప్రిన్సిపాల్స్గా వివరించాడు:
- ద్రవం గ్రిడ్
- ఫ్లూయిడ్ మీడియా
- మీడియా ప్రశ్నలు
మొదటి రెండు పాయింట్లు, ఒక ద్రవం గ్రిడ్ మరియు ద్రవ మాధ్యమాలు, విలువలను పరిమాణీకరించడానికి పిక్సెల్స్కు బదులుగా శాతాలు ఉపయోగించడం ద్వారా సాధించవచ్చు.
వెడల్పు విలువలు కోసం శాతాలను ఉపయోగించి
మూలకం కోసం ఒక వెడల్పుని స్థాపించడానికి మీరు శాతాలు ఉపయోగించినప్పుడు, పత్రంలో ఉన్న మూలకం డిస్ప్లేలు వాస్తవ పరిమాణంలో ఉంటాయి. శాతాలు సాపేక్ష విలువ, అంటే మీ పత్రంలోని ఇతర అంశాలకు సంబంధించి ప్రదర్శించబడే పరిమాణం.
ఉదాహరణకు, మీరు ఒక చిత్రం యొక్క వెడల్పును 50% కు అమర్చినట్లయితే, చిత్రం దాని సాధారణ పరిమాణంలో సగభాగంలో ప్రదర్శిస్తుందని దీని అర్థం కాదు . ఇది ఒక సాధారణ దురభిప్రాయం.
ఒక చిత్రం 600 పిక్సెల్స్ వెడల్పు ఉంటే, అది 50% వద్ద ప్రదర్శించడానికి CSS విలువను ఉపయోగించి వెబ్ బ్రౌజర్లో 300 పిక్సెల్స్ వెడల్పుగా ఉంటుందని కాదు. ఈ శాతం విలువ ఆ చిత్రం కలిగి ఉన్న మూలకం మీద ఆధారపడి ఉంటుంది, ఇది చిత్రం యొక్క స్థానిక పరిమాణం కాదు. కంటైనర్ (ఇది ఒక డివిజన్ లేదా కొన్ని ఇతర HTML మూలకాలు కావచ్చు) 1000 పిక్సెల్స్ వెడల్పు ఉంటే, ఆ చిత్రం 500 పిక్సెల్లలో ప్రదర్శించబడుతుంది, ఆ విలువ 50% కంటైనర్ వెడల్పుగా ఉంటుంది. ఉన్న మూలకం 400 పిక్సెల్స్ వెడల్పు ఉంటే, అప్పుడు చిత్రం 200 పిక్సల్స్ వద్ద ప్రదర్శించబడుతుంది, ఎందుకంటే ఆ విలువ 50% కంటైనర్లో ఉంటుంది. ఇక్కడ ప్రశ్నలోని చిత్రం 50% పరిమాణాన్ని కలిగి ఉంటుంది, ఇది పూర్తిగా ఉన్న మూలకంపై ఆధారపడి ఉంటుంది.
గుర్తుంచుకోండి, ప్రతిస్పందించే డిజైన్ ద్రవం. లేఅవుట్ మరియు పరిమాణాలు స్క్రీన్ పరిమాణం / పరికరం మార్పులుగా మారుతాయి. భౌతిక, వెబ్-కాని పరంగా మీరు దీని గురించి అనుకుంటే, మీరు ప్యాకింగ్ విషయంతో నింపిన కార్డుబోర్డు పెట్టెలా ఉంటుంది. బాక్స్ ఆ సగంతో సగం నిండి ఉండాలని మీరు చెప్పితే, మీకు కావలసిన ప్యాకింగ్ పరిమాణం బాక్స్ పరిమాణాన్ని బట్టి మారుతుంది. అదే వెబ్ డిజైన్ లో శాతం వెడల్పులను నిజం కలిగి.
ఇతర శాతాలు ఆధారంగా శాతం
చిత్రం / కంటైనర్ ఉదాహరణలో, ప్రతిస్పందించే చిత్రం ఎలా ప్రదర్శించబడుతుందో చూపడానికి నేను మూలకం కోసం పిక్సెల్ విలువలను ఉపయోగించాను. వాస్తవానికి, ఉన్న మూలకం కూడా శాతం మరియు చిత్రం లేదా ఇతర అంశాలకు సెట్ చేయబడుతుంది, ఆ కంటైనర్ లోపల ఒక శాతం శాతంగా ఆధారంగా వారి విలువలు పొందుతాయి.
ఆచరణలో ఇది చూపించే మరొక ఉదాహరణ ఇక్కడ ఉంది.
"సైట్ కంటైనర్" (ఒక సాధారణ వెబ్ డిజైన్ అభ్యాసం) తరగతితో మొత్తం సైట్ను కలిగి ఉన్న వెబ్సైట్ను కలిగి ఉన్నారని చెపుతారు. ఆ విభాగానికి లోపల మీరు మూడు వేర్వేరు విభాగాలుగా ఉంటారు, చివరికి శైలి 3 నిలువు వరుసలను ప్రదర్శిస్తుంది. HTML ఇలా ఉండవచ్చు:
ఇప్పుడు, మీరు "కంటైనర్" విభాగాన్ని పరిమాణం 90% అని చెప్పటానికి CSS ను ఉపయోగించవచ్చు. ఈ ఉదాహరణలో, కంటెయినర్ విభాగానికి మరొక ప్రత్యేక మూలకం లేదు, అది ఏ ప్రత్యేకమైన విలువకు సెట్ చేయలేదు, ఇది శరీరానికి మినహాయించి ఉంటుంది. డిఫాల్ట్గా, శరీరం బ్రౌజర్ విండోలో 100% గా కనిపిస్తుంది. అందువలన, "కంటైనర్" డివిజన్ యొక్క శాతం బ్రౌజర్ విండో పరిమాణంపై ఆధారపడి ఉంటుంది. ఆ బ్రౌజర్ విండో పరిమాణంలో మారుతుంది కాబట్టి, ఈ "కంటైనర్" యొక్క పరిమాణం అవుతుంది. కాబట్టి బ్రౌజర్ విండో 2000 పిక్సెల్స్ వెడల్పు ఉంటే, ఈ విభాగం 1800 పిక్సల్స్ వద్ద ప్రదర్శించబడుతుంది. ఇది 2000 యొక్క 90 శాతం (2000 x. 90 = 1800)) గా లెక్కించబడుతుంది, ఇది బ్రౌజర్ పరిమాణం.
"కంటైనర్" లోని "col" విభాగాలలో ప్రతి ఒక్కటి 30% పరిమాణంలో సెట్ చేయబడి ఉంటే, వాటిలో ప్రతి ఒక్కటి 540 పిక్సెల్స్ వెడల్పుగా ఉంటుంది. కంటెయినర్ (1800 x 30 = 540) వద్ద 1800 పిక్సెల్లో 30% గా ఇది లెక్కించబడుతుంది. మేము ఆ కంటైనర్ యొక్క శాతాన్ని మార్చినట్లయితే, ఈ అంతర్గత విభాగాలు కూడా అవి కలిగివున్న పరిమాణంలో మార్పు చెందుతాయి ఎందుకంటే అవి ఆ మూలకంపై ఆధారపడి ఉంటాయి.
బ్రౌజర్ విండోస్ 2000 పిక్సల్స్ వెడల్పులో ఉండిపోయినా, 90% కి బదులుగా కంటెయినర్ యొక్క 80% విలువను మారుస్తాము. అది 1600 పిక్సల్స్ వెడల్పుతో ఇప్పుడు (2000 x .80 = 1600) రెండర్ చేస్తుంది. మేము మా 3 "కొల్" విభాగాల పరిమాణానికి CSS ను మార్చకపోయినా, వాటిని 30% వద్ద వదిలివేసినా, అవి వాటి మూలకం నుండి వేరు వేరుగా ఉంటాయి, అవి పరిమాణంలో ఉన్న సందర్భం మారిపోయింది. ఆ 3 విభాగాలు ఇప్పుడు 480 పిక్సెల్స్ వెడల్పుగా ఉంటాయి, ఇది 1600 లో 30% లేదా కంటైనర్ పరిమాణం (1600 x .30 = 480).
ఇది మరింతగా తీసుకొని, ఈ "కొల్" విభాగాలలో ఒక చిత్రం ఉన్నట్లయితే మరియు ఆ చిత్రం ఒక శాతం వాడకంతో పరిమితం చేయబడింది, దాని పరిమాణపు సందర్భం "కల" గానే ఉంటుంది. పరిమాణంలో "col" విభజన మారినందున దాని లోపల ఉన్న చిత్రం అవుతుంది. బ్రౌజర్ లేదా "కంటైనర్" యొక్క పరిమాణాన్ని మార్చినట్లయితే, అది మూడు "కొల్" విభాగాలను ప్రభావితం చేస్తుంటే, "col" లో ఉన్న చిత్రం యొక్క పరిమాణాన్ని మార్చుకునేటట్లు చేస్తుంది. ఇది శాతం నడిచే పరిమాణ పరిమాణాలకు వస్తుంది.
ఒక వెడల్పు కోసం ఒక శాతం విలువ ఉపయోగించినప్పుడు వెబ్ పేజీలో ఒక ఎలిమెంట్ ఎలా రాండర్ చేస్తుందో మీరు పరిశీలించినప్పుడు, ఆ మూలకం పేజీ యొక్క మార్కప్లో ఉండే మూలకాన్ని మీరు అర్థం చేసుకోవాలి.
క్లుప్తంగా
ప్రతిస్పందించే వెబ్సైట్ల కోసం లేఅవుట్ను సృష్టించడంలో శాతాలు కీలక పాత్ర పోషిస్తాయి. చిత్రాలను ప్రతిబింబించేలా ఒక నిజమైన ద్రవం గ్రిడ్ను తయారు చేయడానికి మీరు చిత్రాలను ప్రతిబింబిస్తూ లేదా శాతం వెడల్పులను ఉపయోగిస్తున్నారా, ఈ లెక్కలు మీరు కోరుకునే రూపాన్ని సాధించటానికి అవసరం.