విషయము
- ప్రతిస్పందించే చిత్రాలు
- ప్రదర్శన
- షరతులతో కూడిన మరియు సోమరితనం లోడింగ్
- ప్రతిస్పందించే టైపోగ్రఫీ
- జావాస్క్రిప్ట్‌లో మీడియా ప్రశ్నలు
- ప్రగతిశీల మెరుగుదల
- లేఅవుట్
- CSS గ్రిడ్ లేఅవుట్
- చివరగా
ప్రతిస్పందించే వెబ్ డిజైన్ చాలా సులభం. లేఅవుట్ కోసం సౌకర్యవంతమైన గ్రిడ్ల కోసం ఎంచుకోండి, సౌకర్యవంతమైన మాధ్యమాన్ని (చిత్రాలు, వీడియో, ఐఫ్రేమ్‌లు) ఉపయోగించుకోండి మరియు ఏదైనా వ్యూపోర్ట్‌లో కంటెంట్‌ను ఉత్తమంగా అమర్చడానికి ఈ కొలతలను నవీకరించడానికి మీడియా ప్రశ్నలను వర్తించండి. ఆచరణలో మేము నేర్చుకున్నది నిజంగా అంత సులభం కాదు. ప్రతి ప్రాజెక్ట్ సమయంలో పెరుగుతున్న చిన్న సమస్యలు మన తలలను గోకడం మరియు అప్పుడప్పుడు మా డెస్క్‌లపై వేలుగోళ్ల కందకాలను చెక్కడం కూడా చేస్తాయి.
నేను రెస్పాన్సివ్ డిజైన్ వీక్లీ వార్తాలేఖను క్యూరేట్ చేయడం మొదలుపెట్టినప్పటి నుండి, వెబ్ కమ్యూనిటీలోని చాలా మంది సభ్యులతో మాట్లాడటం మరియు వారి అనుభవాలను వినడం నా అదృష్టం. సంఘం నిజంగా ఏమి నేర్చుకోవాలనుకుంటుందో ఖచ్చితంగా తెలుసుకోవాలనుకున్నాను, కాబట్టి నేను ఒక సర్వేను పాఠకులకు అందించాను. అగ్ర ఫలితాలు ఇక్కడ ఉన్నాయి:
- ప్రతిస్పందించే చిత్రాలు
- పనితీరును మెరుగుపరుస్తుంది
- ప్రతిస్పందించే టైపోగ్రఫీ
- జావాస్క్రిప్ట్‌లో మీడియా ప్రశ్నలు
- ప్రగతిశీల వృద్ధి
- లేఅవుట్
ఆ విషయాలను దృష్టిలో పెట్టుకుని, మా పరిశ్రమల నాయకులలో కొంతమంది ఆలోచనలను అడిగి నేను పాడ్‌కాస్ట్‌ల శ్రేణిని నడిపాను. వారి ప్రతిస్పందనలలో, ఒక విషయం ఏకగ్రీవంగా ఉంది: మీరు ఉత్తేజకరమైన మరియు అధునాతన పద్ధతుల గురించి చింతించటానికి ముందు ప్రాథమికాలను సరిగ్గా పొందడంపై దృష్టి పెట్టండి. విషయాలను తిరిగి బేసిక్‌లకు తీసుకెళ్లడం ద్వారా, మేము ప్రతిఒక్కరికీ బలమైన ఇంటర్‌ఫేస్‌ను నిర్మించగలుగుతాము, పరికరం లేదా వినియోగదారు సందర్భం అనుమతించినప్పుడు లక్షణాలపై పొరలు వేయడం.
’కాబట్టి ... ఈ అధునాతన పద్ధతుల గురించి ఏమిటి?’ మీరు అడగడం నేను విన్నాను. స్టీఫెన్ హే చెప్పినప్పుడు దీనిని ఉత్తమంగా సంక్షిప్తీకరించినట్లు నేను భావిస్తున్నాను: ’అంతిమ RWD సాంకేతికత ఏ అధునాతన RWD పద్ధతులను ఉపయోగించకుండా ప్రారంభించడం. నిర్మాణాత్మక కంటెంట్‌తో ప్రారంభించండి మరియు మీ మార్గాన్ని పెంచుకోండి. డిజైన్ విచ్ఛిన్నమైనప్పుడు మరియు కంటెంట్ నిర్దేశించినప్పుడు మాత్రమే బ్రేక్‌పాయింట్‌ను జోడించండి మరియు ... అది అంతే. ’
ఈ వ్యాసంలో, నేను బేసిక్స్‌తో ప్రారంభిస్తాను మరియు పరిస్థితి అనుమతించినట్లుగా సంక్లిష్టత యొక్క పొరలను జోడిస్తాను, ఆ అధునాతన పద్ధతులను రూపొందించడానికి. ప్రారంభిద్దాం.
ప్రతిస్పందించే చిత్రాలు
ద్రవ మాధ్యమం RWD యొక్క ముఖ్య భాగం, దీనిని మొదట ఏతాన్ మార్కోట్ నిర్వచించారు. వెడల్పు: 100%; , గరిష్ట-వెడల్పు: 100%; నేటికీ పనిచేస్తుంది, కానీ ప్రతిస్పందించే ఇమేజ్ ల్యాండ్‌స్కేప్ చాలా క్లిష్టంగా మారింది. స్క్రీన్ పరిమాణాలు, పిక్సెల్ సాంద్రత మరియు పరికరాల సంఖ్య పెరుగుతున్నందున మేము ఎక్కువ నియంత్రణను కోరుకుంటాము.
మూడు ప్రధాన ఆందోళనలను రెస్పాన్సివ్ ఇమేజెస్ కమ్యూనిటీ గ్రూప్ (RICG) నిర్వచించింది:
- మేము తీగపై పంపుతున్న చిత్రం యొక్క కిలోబైట్ పరిమాణం
- మేము అధిక DPI పరికరాలకు పంపుతున్న చిత్రం యొక్క భౌతిక పరిమాణం
- వీక్షణపోర్ట్ యొక్క నిర్దిష్ట పరిమాణం కోసం చిత్ర దిశ రూపంలో చిత్ర పంట
యోవి వీస్, ఇండిగోగో సహాయంతో, బ్లింక్ ఇంప్లిమెంటేషన్ - గూగుల్ యొక్క వెబ్కిట్ యొక్క ఫోర్క్, మరియు మీరు దీన్ని చదివే సమయానికి ఇది Chrome మరియు Firefox లో రవాణా చేయబడుతుంది. సఫారి 8 srcset ని రవాణా చేస్తుంది, అయితే పరిమాణాల లక్షణం రాత్రిపూట నిర్మాణాలలో మాత్రమే ఉంటుంది మరియు చిత్రం> ఇంకా అమలు కాలేదు.
మా వెబ్ అభివృద్ధి ప్రక్రియకు క్రొత్తగా ఏదైనా రావడంతో, ప్రారంభించడం కష్టం. దశల వారీగా ఉదాహరణ ద్వారా నడుద్దాం.
img! - అన్ని నాన్ పిక్చర్ సపోర్టింగ్ బ్రౌజర్‌ల కోసం ఫాల్‌బ్యాక్ చిత్రాన్ని ప్రకటించండి -> src = "horse-350.webp"! - చిత్ర పరిమాణాలన్నింటినీ srcset లో ప్రకటించండి. ప్రతి చిత్రం యొక్క వెడల్పు గురించి బ్రౌజర్‌కు తెలియజేయడానికి w డిస్క్రిప్టర్ ఉపయోగించి చిత్ర వెడల్పును చేర్చండి .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - పరిమాణాలు మా సైట్ లేఅవుట్ యొక్క బ్రౌజర్‌కు తెలియజేస్తాయి. ఇక్కడ మేము 64 వీక్షణలు మరియు అంతకంటే పెద్ద ఏ వ్యూపోర్ట్ కోసం చెప్తున్నామో, వీక్షణపోర్ట్‌లో 70% ఆక్రమించే చిత్రాన్ని ఉపయోగించండి -> పరిమాణాలు = "(కనిష్ట-వెడల్పు: 64 ఎమ్) 70vw ,! - వీక్షణపోర్ట్ కాకపోతే పెద్దది, అప్పుడు 37.5 సెమ్‌లు మరియు అంతకంటే పెద్ద ఏ వ్యూపోర్ట్ కోసం, 95% వ్యూపోర్ట్‌ను ఆక్రమించే చిత్రాన్ని ఉపయోగించండి -> (కనిష్ట-వెడల్పు: 37.5 ఎమ్) 95vw ,! - మరియు వీక్షణపోర్ట్ దాని కంటే చిన్నదిగా ఉంటే, అప్పుడు ఉపయోగించండి 100% వీక్షణపోర్ట్ -> 100vw "! - ఎల్లప్పుడూ ఆల్ట్ టెక్స్ట్ కలిగి ఉంటుంది .--> alt =" ఒక గుర్రం "/>
పనితీరు కోణం నుండి మీరు పరిమాణాల లక్షణంలో కనిష్ట-వెడల్పు లేదా గరిష్ట-వెడల్పును ఉపయోగిస్తే అది పట్టింపు లేదు - కాని మూల క్రమం ముఖ్యమైనది. బ్రౌజర్ ఎల్లప్పుడూ మొదటి సరిపోలిక పరిమాణాన్ని ఉపయోగిస్తుంది.
అలాగే, మా డిజైన్‌కు వ్యతిరేకంగా నేరుగా నిర్వచించాల్సిన పరిమాణాల లక్షణాన్ని మేము హార్డ్-కోడింగ్ చేస్తున్నామని గుర్తుంచుకోండి. ఇది ముందుకు సాగే సమస్యలను కలిగిస్తుంది. ఉదాహరణకు, మీరు మీ సైట్‌ను పున es రూపకల్పన చేస్తే, మీరు img> లేదా పిక్చర్> లన్నింటినీ మళ్లీ సందర్శించి పరిమాణాలను పునర్నిర్వచించాల్సి ఉంటుంది. మీరు CMS ఉపయోగిస్తుంటే, మీ నిర్మాణ ప్రక్రియలో భాగంగా దీనిని అధిగమించవచ్చు.
WordPress ఇప్పటికే సహాయం కోసం ఒక ప్లగిన్ ఉంది. ఇది WP ప్రామాణిక చిత్ర రకాల్లో srcset ని నిర్వచిస్తుంది మరియు పరిమాణాలను కేంద్ర ప్రదేశంలో ప్రకటించడానికి మిమ్మల్ని అనుమతిస్తుంది. పేజీ డేటాబేస్ నుండి ఉత్పత్తి అయినప్పుడు, అది img> లో ఏదైనా ప్రస్తావనలను మార్పిడి చేస్తుంది మరియు వాటిని పిక్చర్ మార్కప్‌తో భర్తీ చేస్తుంది.
ప్రాథమిక
- మీరు నిజంగా చిత్రాన్ని చేర్చాల్సిన అవసరం ఉందా అని ఆలోచించండి. ఇమేజ్ కోర్ కంటెంట్, లేదా ఇది అలంకారమా? ఒక తక్కువ చిత్రం వేగంగా లోడ్ సమయం అని అర్థం
- ImageOptim ఉపయోగించి మీరు చేర్చాల్సిన చిత్రాలను ఆప్టిమైజ్ చేయండి
- మీ సర్వర్ లేదా .htaccess ఫైల్‌లో మీ చిత్రాల కోసం గడువు శీర్షికలను సెట్ చేయండి (‘పనితీరు’ క్రింద వివరాలను చూడండి)
- పిక్చర్ ఫిల్ చిత్రాలకు పాలిఫిల్ మద్దతును అందిస్తుంది
ఆధునిక
- JQuery యొక్క లేజీ లోడ్ ప్లగ్ఇన్ ఉపయోగించి లేజీ మీ చిత్రాలను లోడ్ చేయండి
- ఫీచర్ డిటెక్షన్ కోసం HTMLImageElement.Sizes మరియు HTMLPicturesElement ని ఉపయోగించండి.
- గితుబ్‌లో కనిపించే అధునాతన పిక్చర్‌ఫిల్ WP ప్లగ్ఇన్, కస్టమ్ ఇమేజ్ వెడల్పులు మరియు పరిమాణాల విలువలను నిర్వచించడానికి మిమ్మల్ని అనుమతిస్తుంది
ప్రదర్శన
మా పేజీలలో వేగంగా గ్రహించిన పనితీరును పొందడానికి, సర్వర్ నుండి మొదటి ప్రతిస్పందనలో మా పేజీ యొక్క పై భాగాన్ని అందించడానికి అవసరమైన అన్ని HTML మరియు CSS మాకు అవసరం. ఆ మేజిక్ సంఖ్య 14kb మరియు ఇది మొదటి రౌండ్-ట్రిప్ సమయం (RTT) లో గరిష్ట రద్దీ విండో పరిమాణంపై ఆధారపడి ఉంటుంది.
ప్యాట్రిక్ హమాన్, గార్డియన్ వద్ద ఫ్రంటెండ్ టెక్నికల్ లీడ్, మరియు అతని బృందం ఫ్రంటెండ్ మరియు బ్యాకెండ్ పద్ధతుల మిశ్రమాన్ని ఉపయోగించి 1000ms అడ్డంకిని అధిగమించగలిగారు. అవసరమైన కంటెంట్ - వ్యాసం - వినియోగదారుకు వీలైనంత త్వరగా మరియు 14kb మ్యాజిక్ నంబర్‌లో అందజేయడం గార్డియన్ యొక్క విధానం.
ప్రక్రియను చూద్దాం:
- వార్తా కథనానికి Google లింక్‌పై వినియోగదారు క్లిక్ చేస్తారు
- వ్యాసం కోసం ఒకే నిరోధక అభ్యర్థన డేటాబేస్కు పంపబడుతుంది. సంబంధిత కథనాలు లేదా వ్యాఖ్యలు అభ్యర్థించబడవు
- HTML క్రిటికల్ CSS కలిగి ఉంది
- తలలో>
- ‘ఆవపిండిని కత్తిరించు’ ప్రక్రియ చేపట్టబడుతుంది మరియు వినియోగదారు పరికర లక్షణాల ఆధారంగా ఏదైనా షరతులతో కూడిన అంశాలు లోడ్ చేయబడతాయి
- వ్యాసానికి సంబంధించిన లేదా మద్దతు ఇచ్చే ఏదైనా కంటెంట్ (సంబంధిత వ్యాస చిత్రాలు, వ్యాస వ్యాఖ్యలు మరియు మొదలైనవి) సోమరితనం స్థానంలో లోడ్ చేయబడతాయి
క్లిష్టమైన రెండరింగ్ మార్గాన్ని ఆప్టిమైజ్ చేయడం అంటే తల> 222 పంక్తుల పొడవు ఉంటుంది. అయినప్పటికీ, వినియోగదారు చూడటానికి వచ్చిన క్లిష్టమైన కంటెంట్ ఇప్పటికీ 14 కిలోల ప్రారంభ పేలోడ్‌లో వస్తుంది. ఈ ప్రక్రియ 1000ms రెండరింగ్ అడ్డంకిని తొలగించడానికి సహాయపడుతుంది.
షరతులతో కూడిన మరియు సోమరితనం లోడింగ్
షరతులతో కూడిన లోడింగ్ వారి పరికర లక్షణం ఆధారంగా వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది. మోడరనిజర్ వంటి సాధనాలు ఈ లక్షణాలను పరీక్షించడానికి మిమ్మల్ని అనుమతిస్తాయి, కానీ బ్రౌజర్ మద్దతు ఇస్తుందని చెప్పినందున, ఇది ఎల్లప్పుడూ పూర్తి మద్దతునివ్వదని అర్థం.
వినియోగదారు ఆ లక్షణాన్ని ఉపయోగించాలనే ఉద్దేశ్యాన్ని చూపించే వరకు ఏదో లోడ్ చేయడాన్ని నిలిపివేయడం ఒక సాంకేతికత. ఇది షరతులతో పరిగణించబడుతుంది. వినియోగదారు ఐకాన్‌లను కదిలించే వరకు లేదా తాకినంత వరకు మీరు సామాజిక చిహ్నాలలో లోడింగ్‌ను నిలిపివేయవచ్చు లేదా యూజర్ అంకితమైన మ్యాపింగ్ అనువర్తనానికి లింక్ చేయడాన్ని ఇష్టపడే చిన్న వీక్షణపోర్ట్‌లలో ఐఫ్రేమ్ గూగుల్ మ్యాప్‌ను లోడ్ చేయడాన్ని మీరు నివారించవచ్చు. మరొక విధానం ఏమిటంటే ‘ఆవపిండిని కత్తిరించండి’ - దీనిపై వివరాల కోసం పై బాక్స్ అవుట్ చూడండి.
లేజీ లోడింగ్ అనేది మీరు ఎప్పుడైనా పేజీలో లోడ్ చేయాలనుకునేది - వ్యాసం, వ్యాఖ్యలు లేదా ఇతర సంబంధిత వ్యాసాలలో భాగమైన చిత్రాలు - కానీ వినియోగదారు కంటెంట్‌ను వినియోగించడం ప్రారంభించడానికి అక్కడ ఉండవలసిన అవసరం లేదు.
ప్రాథమిక
- ఫైళ్ళ కోసం జిజిప్పింగ్‌ను ప్రారంభించండి మరియు అన్ని స్టాటిక్ కంటెంట్ (netm.ag/expire-260) కోసం గడువు శీర్షికలను సెట్ చేయండి.
- లేజీ లోడ్ j క్వెరీ ప్లగ్ఇన్ ఉపయోగించండి. వీక్షణపోర్ట్‌ను చేరుకున్నప్పుడు లేదా కొంత సమయం తర్వాత ఇది చిత్రాలను లోడ్ చేస్తుంది
ఆధునిక
- వేగంగా లేదా క్లౌడ్‌ఫ్లేర్‌ను సెటప్ చేయండి. కంటెంట్ డెలివరీ నెట్‌వర్క్‌లు (సిడిఎన్‌లు) మీ స్టాటిక్ కంటెంట్‌ను మీ స్వంత సర్వర్ కంటే వేగంగా వినియోగదారులకు బట్వాడా చేస్తాయి మరియు కొన్ని ఉచిత శ్రేణులను కలిగి ఉంటాయి
- సమాంతర http అభ్యర్థనలు వంటి http2 లక్షణాలను సద్వినియోగం చేసుకోవడానికి http2- ప్రారంభించబడిన బ్రౌజర్‌ల కోసం SPDY ని ప్రారంభించండి
- సోషల్ కౌంట్ మీ సామాజిక చిహ్నాలను షరతులతో లోడ్ చేయడానికి అనుమతిస్తుంది
- స్టాటిక్ మ్యాప్స్ API ని ఉపయోగించడం వలన చిత్రాల కోసం ఇంటరాక్టివ్ Google మ్యాప్‌లను మార్చడానికి మిమ్మల్ని అనుమతిస్తుంది. Netm.ag/static-260 వద్ద బ్రాడ్ ఫ్రాస్ట్ యొక్క ఉదాహరణను చూడండి
- అజాక్స్ చేర్చు సరళి డేటా-ముందు, డేటా-తర్వాత లేదా డేటా-పున ment స్థాపన లక్షణం నుండి కంటెంట్ స్నిప్పెట్లను లోడ్ చేస్తుంది
ప్రతిస్పందించే టైపోగ్రఫీ
టైపోగ్రఫీ అనేది మీ కంటెంట్‌ను సులభంగా జీర్ణం చేసుకోవడం. రెస్పాన్సివ్ టైపోగ్రఫీ అనేక రకాల పరికరాలు మరియు వీక్షణపోర్ట్‌లలో చదవడానికి వీలుగా దీనిని విస్తరించింది. జోర్డాన్ మూర్ ఆ రకాన్ని తాను అంగీకరించడానికి ఇష్టపడని విషయం అని అంగీకరించాడు. మీకు అవసరమైతే చిత్రం లేదా రెండింటిని వదలండి, కానీ మీకు గొప్ప రకం ఉందని నిర్ధారించుకోండి.
ప్రతి బ్రౌజర్ లేదా పరికర తయారీదారు ఒక నిర్దిష్ట రిజల్యూషన్ లేదా పరికరం కోసం సహేతుకంగా చదవగలిగే డిఫాల్ట్‌ను చేస్తుంది కాబట్టి స్టీఫెన్ హే HTML ఫాంట్ పరిమాణాన్ని 100 శాతానికి సెట్ చేయాలని సూచిస్తున్నారు (చదవండి: దానిని అలాగే ఉంచండి). చాలా డెస్క్‌టాప్ బ్రౌజర్‌లకు ఇది 16 పిక్స్‌.
మరోవైపు, మూర్ కొన్ని కంటెంట్ అంశాల కోసం కనీస ఫాంట్ పరిమాణాన్ని సెట్ చేయడానికి REM యూనిట్ మరియు HTML ఫాంట్-పరిమాణాన్ని ఉపయోగిస్తుంది. ఉదాహరణకు, ఒక వ్యాసం యొక్క బైలైన్ ఎల్లప్పుడూ 14px గా ఉండాలని మీరు కోరుకుంటే, దానిని HTML మూలకంపై బేస్ ఫాంట్-సైజుగా సెట్ చేసి .బైలైన్ {font-size: 1rem; set ని సెట్ చేయండి. మీరు శరీరాన్ని స్కేల్ చేస్తున్నప్పుడు: ఫాంట్-సైజు: వ్యూపోర్ట్‌కు అనుగుణంగా మీరు .బై-లైన్ శైలిని ప్రభావితం చేయరు.
మంచి పఠనం పొడవు కూడా ముఖ్యం - 45 నుండి 65 అక్షరాలను లక్ష్యంగా చేసుకోండి. మీ కంటెంట్‌ను తనిఖీ చేయడానికి మీరు ఉపయోగించే బుక్‌మార్క్‌లెట్ ఉంది. మీరు మీ డిజైన్‌తో బహుళ భాషలకు మద్దతు ఇస్తుంటే, అప్పుడు లైన్ పొడవు కూడా మారవచ్చు. అక్కడ ఏవైనా సమస్యలను పరిష్కరించడానికి: లాంగ్ (డి) వ్యాసం {గరిష్ట-వెడల్పు: 30 ఎమ్ use ఉపయోగించాలని మూర్ సూచించారు.
నిలువు లయను నిర్వహించడానికి, కంటెంట్ బ్లాక్స్, ఉల్>, ఓల్>, బ్లాక్‌కోట్>, టేబుల్>, బ్లాక్‌కోట్> మరియు వాటికి వ్యతిరేకంగా మార్జిన్-బాటమ్‌ను మీ లైన్-ఎత్తుకు సెట్ చేయండి. చిత్రాల పరిచయంతో లయకు అంతరాయం ఏర్పడితే మీరు Baseline.js లేదా BaselineAlign.js ని జోడించడం ద్వారా దాన్ని పరిష్కరించవచ్చు.
ప్రాథమిక
- మీ ఫాంట్‌ను 100 శాతం బాడీపై ఆధారపరచండి
- సాపేక్ష ఎమ్ యూనిట్లలో పని చేయండి
- మీ డిజైన్‌లో నిలువు లయను నిర్వహించడానికి మీ మార్జిన్‌లను మీ లైన్ ఎత్తుకు సెట్ చేయండి
ఆధునిక
- Enhance.js లేదా వాయిదా వేసిన ఫాంట్ లోడింగ్‌తో ఫాంట్ లోడింగ్ పనితీరును మెరుగుపరచండి
- సెమాంటిక్ హెడ్డింగుల కోసం సాస్ @ కలుపులను ఉపయోగించండి.
- తరచుగా మనం h2 మార్కప్ అవసరమయ్యే సైడ్‌బార్ విడ్జెట్‌లో h5 శైలిని ఉపయోగించాలి. పరిమాణాన్ని నియంత్రించడానికి మరియు కింది కోడ్‌తో అర్థవంతంగా ఉండటానికి గడ్డం యొక్క టైపోగ్రాఫిక్ మిక్సిన్‌లను ఉపయోగించండి:
.సైడ్‌బార్ h2 head head శీర్షిక -5 ను చేర్చండి
జావాస్క్రిప్ట్‌లో మీడియా ప్రశ్నలు
మేము మీడియా ప్రశ్నల ద్వారా వివిధ రకాల వీక్షణపోర్ట్‌లలో లేఅవుట్ను నియంత్రించగలిగినప్పటి నుండి, మా జావాస్క్రిప్ట్‌ను అమలు చేయడానికి కూడా దాన్ని కట్టబెట్టడానికి మేము ఒక మార్గం కోసం చూస్తున్నాము. కొన్ని వ్యూపోర్ట్ వెడల్పులు, ఎత్తులు మరియు ధోరణులపై జావాస్క్రిప్ట్‌ను కాల్చడానికి కొన్ని మార్గాలు ఉన్నాయి మరియు కొంతమంది స్మార్ట్ వ్యక్తులు ఎన్‌క్వైర్.జెస్ మరియు సింపుల్ స్టేట్ మేనేజర్ వంటి కొన్ని సులభమైన స్థానిక JS ప్లగిన్‌లను వ్రాశారు. మ్యాచ్‌మీడియా ఉపయోగించి మీరు దీన్ని మీరే నిర్మించవచ్చు. అయితే, మీ మీడియా ప్రశ్నలను మీ CSS మరియు జావాస్క్రిప్ట్‌లో నకిలీ చేయవలసిన సమస్య మీకు ఉంది.
ఆరోన్ గుస్టాఫ్సన్ చక్కని ట్రిక్ కలిగి ఉన్నాడు అంటే మీ CSS మరియు మీ JS లో మీ మీడియా ప్రశ్నలను మీరు నిర్వహించాల్సిన అవసరం లేదు. ఈ ఆలోచన మొదట జెరెమీ కీత్ నుండి వచ్చింది మరియు ఈ ఉదాహరణలో గుస్టాఫ్సన్ దీనిని పూర్తి అమలుకు తీసుకువెళ్లారు.
GetActiveMQ (netm.ag/media-260) ఉపయోగించి, శరీర మూలకం చివరిలో div # getActiveMQ- వాచర్‌ని ఇంజెక్ట్ చేసి దాచండి. CSS సెట్‌లో # getActiveMQ- వాచర్ {font-family: break-0; media మొదటి మీడియా ప్రశ్నకు, ఫాంట్-ఫ్యామిలీ: బ్రేక్ -1; రెండవది, ఫాంట్-కుటుంబం: బ్రేక్ -2; మూడవ మరియు మొదలైనవి.
వీక్షణపోర్ట్ పరిమాణం మారిందో లేదో తనిఖీ చేయడానికి స్క్రిప్ట్ వాచ్ రీసైజ్ () (netm.ag/resize-260) ను ఉపయోగిస్తుంది, ఆపై క్రియాశీల ఫాంట్-ఫ్యామిలీని తిరిగి చదువుతుంది. వీక్షణపోర్ట్ అనుమతించినప్పుడు, లైట్‌బాక్స్ యొక్క ప్రవర్తనను మార్చడం లేదా డేటా పట్టిక యొక్క లేఅవుట్ను నవీకరించడం వంటివి dl> కు టాబ్డ్ ఇంటర్‌ఫేస్‌ను జోడించడం వంటి JS మెరుగుదలలను హుక్ చేయడానికి ఇప్పుడు మీరు దీన్ని ఉపయోగించవచ్చు. Netm.ag/active-260 వద్ద getActiveMQ కోడెపెన్‌ను చూడండి.
ప్రాథమిక
- విభిన్న వీక్షణపోర్ట్‌ల కోసం జావాస్క్రిప్ట్ గురించి మరచిపోండి. వినియోగదారులకు కంటెంట్ మరియు వెబ్‌సైట్ ఫంక్షన్లను వారు అన్ని వీక్షణపోర్ట్‌లలో యాక్సెస్ చేయగల విధంగా అందించండి. మాకు ఎప్పుడూ జావాస్క్రిప్ట్ అవసరం లేదు
ఆధునిక
- మీడియా ప్రశ్నల యొక్క ముందే నిర్వచించిన జాబితాగా బ్రేకప్‌ను ఉపయోగించడం ద్వారా మరియు getActiveMQ- వాచర్ కోసం ఫాంట్ కుటుంబాల జాబితాను స్వయంచాలకంగా చేయడం ద్వారా గుస్టాఫ్సన్ పద్ధతిని విస్తరించండి.
ప్రగతిశీల మెరుగుదల
ప్రగతిశీల మెరుగుదల గురించి ఒక సాధారణ దురభిప్రాయం ఏమిటంటే, ‘ఓహ్, నేను ఈ క్రొత్త లక్షణాన్ని ఉపయోగించలేను’ అని ప్రజలు అనుకుంటారు, కానీ నిజంగా ఇది వ్యతిరేకం. ప్రగతిశీల మెరుగుదల అంటే ఒక లక్షణానికి ఒకటి లేదా బ్రౌజర్‌లలో మాత్రమే మద్దతు ఉంటే మీరు దాన్ని అందించగలరు మరియు కాలక్రమేణా కొత్త సంస్కరణలు వచ్చేసరికి ప్రజలు మంచి అనుభవాన్ని పొందుతారు.
మీరు ఏదైనా వెబ్‌సైట్ యొక్క ప్రధాన పనితీరును పరిశీలిస్తే, మీరు దానిని HTML గా బట్వాడా చేయవచ్చు మరియు సర్వర్ వైపు అన్ని ప్రాసెసింగ్ చేయవచ్చు. చెల్లింపులు, ఫారమ్‌లు, ఇష్టాలు, భాగస్వామ్యం, ఇమెయిల్‌లు, డాష్‌బోర్డ్‌లు - ఇవన్నీ చేయవచ్చు. ప్రాథమిక పనిని నిర్మించిన తర్వాత, దాని పైన ఉన్న అద్భుతమైన సాంకేతిక పరిజ్ఞానాలను పొరలుగా వేయవచ్చు, ఎందుకంటే వాటి ద్వారా వచ్చే వాటిని పట్టుకోవడానికి మాకు భద్రతా వలయం ఉంది. మేము ఇక్కడ మాట్లాడిన చాలా ఆధునిక విధానాలు ప్రగతిశీల మెరుగుదలపై ఆధారపడి ఉంటాయి.
లేఅవుట్
సౌకర్యవంతమైన లేఅవుట్ చెప్పడం చాలా సులభం, కానీ దీనికి చాలా భిన్నమైన విధానాలు ఉన్నాయి. వీటిని ఉపయోగించి తక్కువ మార్కప్‌తో సరళమైన గ్రిడ్ లేఅవుట్‌లను సృష్టించండి: nth-child () సెలెక్టర్.
/ * గ్రిడ్ కోసం మొబైల్ మొదటి వెడల్పును ప్రకటించండి * / .గ్రిడ్ -1-4 {ఫ్లోట్: ఎడమ; వెడల్పు: 100%; View / * వీక్షణపోర్ట్ కనీసం 37.5em ఉన్నప్పుడు గ్రిడ్‌ను మూలకానికి 50% గా సెట్ చేయండి * / @ మీడియా (కనిష్ట-వెడల్పు: 37.5em) {.గ్రిడ్ -1-4 {వెడల్పు: 50%; } / * మొదటి తర్వాత ప్రతి రెండవ మూలకాన్ని ఫ్లోట్ క్లియర్ చేయండి. ఇది గ్రిడ్‌లోని 3 వ, 5 వ, 7 వ, 9 వ ... లను లక్ష్యంగా చేసుకుంటుంది. * / .గ్రిడ్ -1-4: nth-of-type (2n + 1) {clear: left; }} @ మీడియా (కనిష్ట-వెడల్పు: 64 ఎమ్) {.గ్రిడ్ -1-4 {వెడల్పు: 25%; } / * మునుపటి క్లియర్ తొలగించండి * / .గ్రిడ్ -1-4: nth-of-type (2n + 1) {clear: none; 4 / * మొదటి తర్వాత ప్రతి 4 వ మూలకాన్ని ఫ్లోట్ క్లియర్ చేయండి. ఇది గ్రిడ్‌లోని 5 వ, 9 వ ... లను లక్ష్యంగా చేసుకుంటుంది. * / .గ్రిడ్ -1-4: nth-of-type (4n + 1) {clear: left; }}
మీ లేఅవుట్ల కోసం స్థానం మరియు తేలియాడుటకు వీడ్కోలు. ఈ రోజు వరకు వారు మాకు బాగా సేవలు అందించినప్పటికీ, లేఅవుట్ కోసం వారి ఉపయోగం అవసరమైన హాక్. మా లేఅవుట్ బాధలన్నింటినీ పరిష్కరించడానికి సహాయపడే బ్లాక్‌లో ఇప్పుడు మాకు ఇద్దరు కొత్త పిల్లలు ఉన్నారు - ఫ్లెక్స్‌బాక్స్ మరియు గ్రిడ్లు.
వ్యక్తిగత మాడ్యూళ్ళకు ఫ్లెక్స్‌బాక్స్ చాలా బాగుంది, ప్రతి మాడ్యూళ్ళలోని కంటెంట్ ముక్కల లేఅవుట్ను నియంత్రిస్తుంది. మేము బట్వాడా చేయడానికి ప్రయత్నించే లేఅవుట్లు ఉన్నాయి, అవి ఫ్లెక్స్‌బాక్స్ ఉపయోగించి మరింత సులభంగా సాధించవచ్చు మరియు ప్రతిస్పందించే సైట్‌లతో ఇది మరింత నిజం. దీని గురించి మరింత తెలుసుకోవడానికి, ఫ్లెక్స్‌బాక్స్ లేదా ఫ్లెక్స్‌బాక్స్ పాలీఫిల్‌కు CSS ట్రిక్స్ గైడ్ చూడండి.
CSS గ్రిడ్ లేఅవుట్
స్థూల స్థాయి లేఅవుట్ కోసం గ్రిడ్ ఎక్కువ. గ్రిడ్ లేఅవుట్ మాడ్యూల్ మీ CSS లో మీ లేఅవుట్ను వివరించడానికి గొప్ప మార్గాన్ని ఇస్తుంది. ప్రస్తుతానికి ఇది ముసాయిదా దశలో ఉన్నప్పటికీ, రాచెల్ ఆండ్రూ రాసిన CSS గ్రిడ్ లేఅవుట్‌పై ఈ కథనాన్ని నేను సిఫార్సు చేస్తున్నాను.
చివరగా
మీ ప్రతిస్పందించే అభ్యాసాన్ని విస్తరించడానికి ఇవి కొన్ని చిట్కాలు. ఏదైనా కొత్త ప్రతిస్పందించే పనిని సంప్రదించినప్పుడు, ఒక అడుగు వెనక్కి తీసుకోండి మరియు మీరు ప్రాథమికాలను సరిగ్గా పొందారని నిర్ధారించుకోండి. మీ కంటెంట్, HTML మరియు లేయర్ మెరుగైన అనుభవాలతో ప్రారంభించండి మరియు మీరు మీ డిజైన్లను ఎక్కడికి తీసుకెళ్లగలరో దానికి పరిమితి ఉండదు.
ఈ వ్యాసం మొదట 260 సంచికలో కనిపించింది నెట్ మ్యాగజైన్.
