सामग्री
- प्रतिसादात्मक प्रतिमा
- कामगिरी
- सशर्त आणि आळशी लोडिंग
- प्रतिसाद टायपोग्राफी
- जावास्क्रिप्ट मध्ये मीडिया क्वेरी
- प्रगतीशील वर्धन
- लेआउट
- सीएसएस ग्रीड लेआउट
- शेवटी
उत्तरदायी वेब डिझाइन आश्चर्यकारकपणे सोपे वाटते. लेआउटसाठी लवचिक ग्रीड्सची निवड करा, लवचिक मीडिया वापरा (प्रतिमा, व्हिडिओ, इफ्रेम्स) आणि कोणत्याही व्ह्यूपोर्टवरील सामग्रीची उत्तम व्यवस्था करण्यासाठी ही मोजमापे अद्यतनित करण्यासाठी मीडिया क्वेरी लागू करा. सराव मध्ये आम्ही शिकलो हे खरोखर तितके सोपे नाही. प्रत्येक प्रोजेक्ट दरम्यान तयार होणारे छोटे-छोटे मुद्दे आपल्याला डोकं खरडवून ठेवतात आणि कधीकधी आमच्या डेस्कवर नख देखील ठेवतात.
मी प्रतिसाद देणारी डिझाईन साप्ताहिक वृत्तपत्र क्युरेट करण्यास प्रारंभ केल्यापासून माझे भाग्य अनेक आहे की मी वेब समुदायाच्या सदस्यांसह बोलू आणि त्यांचे अनुभव ऐकले. मला समुदायाला खरोखर काय शिकायचे आहे ते शोधून काढायचे होते, म्हणून मी एक सर्वेक्षण वाचकांपर्यंत पोहोचविले. येथे शीर्ष परिणाम आहेत:
- प्रतिसादात्मक प्रतिमा
- कामगिरी सुधारत आहे
- प्रतिसाद टायपोग्राफी
- जावास्क्रिप्ट मध्ये मीडिया क्वेरी
- प्रगतीशील संवर्धन
- लेआउट
हे विषय ध्यानात घेऊन मी आमच्या उद्योगातील काही नेत्यांना त्यांचे विचार विचारत पॉडकास्टची मालिका चालविली. त्यांच्या प्रतिसादामध्ये एक मुद्दा एकमताचा होता: आपण रोमांचक आणि प्रगत तंत्रांची चिंता करणे सुरू करण्यापूर्वी मूलभूत गोष्टी मिळण्यावर लक्ष केंद्रित करा. मूलभूत गोष्टींवर परत जाऊन आम्ही डिव्हाइस किंवा वापरकर्त्याचा संदर्भ अनुमती देते तेव्हा वैशिष्ट्यांवरील मजकूर घालून प्रत्येकासाठी एक मजबूत इंटरफेस तयार करण्यास आम्ही सक्षम आहोत.
’तर ... या प्रगत तंत्रांचे काय?’ मी तुम्हाला विचारतो असे ऐकतो. माझ्या मते स्टीफन हे यांनी असे म्हटले तेव्हा ते उत्कृष्ट नमूद केले: ’अंतिम आरडब्ल्यूडी तंत्रज्ञान आरडब्ल्यूडी तंत्रज्ञानाची कोणतीही तंत्रज्ञानाचा वापर न करता प्रारंभ करणे होय. संरचित सामग्रीसह प्रारंभ करा आणि आपला मार्ग तयार करा. जेव्हा डिझाइन खंडित होईल आणि सामग्री आज्ञा देते तेव्हा केवळ ब्रेकपॉइंट जोडा आणि तीच. ’
या लेखात, मी त्या मूलभूत गोष्टींसह प्रारंभ करू आणि परिस्थितीने अनुमती दिल्यामुळे जटिलतेचे स्तर जोडून त्या प्रगत तंत्रांची पूर्तता करीन. चला सुरू करुया.
प्रतिसादात्मक प्रतिमा
जेव्हा एथन मार्कोटे यांनी प्रथम परिभाषित केले तेव्हा फ्लूइड मीडिया आरडब्ल्यूडीचा मुख्य भाग होता. रुंदी: 100%; , कमाल रूंदी: 100%; अजूनही आज कार्य करते, परंतु प्रतिसादात्मक प्रतिमा लँडस्केप खूपच क्लिष्ट बनली आहे. स्क्रीन आकार, पिक्सेल डेन्सिटी आणि डिव्‍हाइसेसची संख्या वाढत असताना आम्ही अधिक नियंत्रण शोधू शकतो.
तीन मुख्य चिंता उत्तरदायी प्रतिमा समुदाय समूह (आरआयसीजी) द्वारे परिभाषित केल्या:
- आम्ही वायरवर पाठवत असलेल्या प्रतिमेचा किलोबाइट आकार
- आम्ही उच्च डीपीआय डिव्हाइसवर पाठवत असलेल्या प्रतिमेचा भौतिक आकार
- व्ह्यूपोर्टच्या विशिष्ट आकारासाठी कला दिशेच्या स्वरूपात प्रतिमा क्रॉप करा
योएव वेस यांनी, इंडिगोगोच्या मदतीने, ब्लिंक अंमलबजावणी - Google च्या वेबकिटचा काटा, यावर बहुतेक काम केले आहे आणि जेव्हा आपण हे वाचत असाल तेव्हा ते Chrome आणि Firefox मध्ये पाठवले जाईल. सफारी 8 एसआरसीसेट पाठवेल, तथापि आकार विशेषता केवळ रात्रीच्या बांधकामात आहे आणि चित्र> अद्याप लागू केलेली नाही.
आमच्या वेब विकास प्रक्रियेत नवीन काहीही आल्यामुळे, प्रारंभ करणे कठीण होऊ शकते. चला चरणानुसार उदाहरणाद्वारे चला.
img! - सर्व नॉन पिक्चर सपोर्टिंग ब्राउझरसाठी फॉलबॅक प्रतिमा घोषित करा -> src = "घोडा -350.webp"! - सर्व प्रतिमा आकार एससीआरसेटमध्ये घोषित करा. प्रत्येक प्रतिमेच्या रूंदीच्या ब्राउझरला माहिती देण्यासाठी डब्ल्यू वर्णनकर्त्याचा वापर करुन प्रतिमेची रुंदी समाविष्ट करा .--> srcset = "घोडा -350.webp 350 डब्ल्यू, घोडा -500.webp 500 डब्ल्यू, घोडा -1024.webp 1024 डब्ल्यू, हॉर्स.जेपीजी 2000 डब्ल्यू "! - आकार आमच्या साइट लेआउटच्या ब्राउझरला माहिती देतात. येथे आम्ही ems 64 मी आणि त्याहून अधिक व्ह्यूपोर्टसाठी म्हणतो आहोत, अशी व्ह्यूपोर्ट -> आकार = "(किमान रुंदी: em 64 मी) v० व्हडब्ल्यूच्या %०% व्यापतील अशी एक प्रतिमा वापरा, जर व्ह्यूपोर्ट तसे नसेल तर मोठे, तर .5 37..5 सेमी आणि मोठ्या असलेल्या कोणत्याही व्ह्यूपोर्टसाठी, व्ह्यूपोर्टच्या%%% व्यापलेल्या प्रतिमा वापरा -> (किमान रुंदी: .5 37.em मी) v v 95 व्ही, आणि - व्ह्यूपोर्ट त्यापेक्षा लहान असल्यास, वापरा व्ह्यूपोर्टच्या 100% व्यापलेल्या प्रतिमेवर -> 100vw "- नेहमी Alt मजकूर ठेवा .--> Alt =" एक घोडा "/>
कार्यप्रदर्शनाच्या दृष्टीकोनातून आपण आकारांच्या विशेषतांमध्ये किमान-रूंदी किंवा कमाल-रूंदी वापरत असल्यास काही फरक पडत नाही - परंतु स्त्रोत ऑर्डर फरक पडत नाही. ब्राउझर नेहमी प्रथम जुळणारा आकार वापरेल.
तसेच, लक्षात ठेवा आम्ही आमच्या डिझाइन विरूद्ध थेट परिभाषित करण्यासाठी आकारांचे गुणधर्म हार्ड-कोडिंग करीत आहोत. यामुळे पुढे जाणारे प्रश्न उद्भवू शकतात. उदाहरणार्थ, आपण आपली साइट पुन्हा डिझाइन करत असल्यास आपणास सर्व img> किंवा चित्र> चे पुन्हा पुनरावलोकन करणे आवश्यक आहे आणि आकारांची पुन्हा व्याख्या करणे आवश्यक आहे. आपण सीएमएस वापरत असल्यास, आपल्या बिल्ड प्रक्रियेचा भाग म्हणून यावर मात केली जाऊ शकते.
वर्डप्रेसकडे आधीपासूनच मदतीसाठी एक प्लगइन आहे. हे डब्ल्यूपी मानक प्रतिमा वाणांवर एसआरसीसेट परिभाषित करते आणि आपल्याला मध्यवर्ती ठिकाणी आकार घोषित करण्याची परवानगी देते. जेव्हा पृष्ठ डेटाबेसमधून व्युत्पन्न होते, तेव्हा ते img> वरील कोणत्याही उल्लेखास स्वॅप करते आणि त्यास चित्रांच्या मार्कअपसह पुनर्स्थित करते.
मूलभूत
- आपल्याला खरोखर एखादी प्रतिमा समाविष्ट करण्याची आवश्यकता आहे की नाही याचा विचार करा. प्रतिमा मुख्य सामग्री आहे किंवा ती सजावटीची आहे? एका कमी प्रतिमेचा अर्थ वेगवान भार वेळ असेल
- आपणास इमेजऑप्टिम वापरुन समाविष्ट करणे आवश्यक असलेल्या प्रतिमा ऑप्टिमाइझ करा
- आपल्या सर्व्हरवर किंवा .htaccess फाईलवर आपल्या प्रतिमांसाठी कालबाह्य शीर्षलेख सेट करा (‘परफॉरमन्स’ अंतर्गत तपशील पहा)
- पिक्चरफिल चित्रांसाठी पॉलिफिल समर्थन प्रदान करते
प्रगत
- JQuery चे आळशी लोड प्लगइन वापरुन आपल्या प्रतिमा आळशी करा
- वैशिष्ट्य शोधण्यासाठी एचटीएमएलआयमेज.इलेमेंट. आकार आणि एचटीएमएल पिक्चर एलिमेंट वापरा.
- गीथब वर आढळलेले प्रगत पिक्चरफिल डब्ल्यूपी प्लगइन आपल्याला सानुकूल प्रतिमा रूंदी आणि आकारांची मूल्ये परिभाषित करण्यास अनुमती देईल
कामगिरी
आमच्या पृष्ठांवर सर्वात वेगवान कामगिरी मिळविण्यासाठी, सर्व्हरकडून पहिल्या प्रतिसादामध्ये आमच्या पृष्ठाचा वरचा भाग प्रस्तुत करण्यासाठी आम्हाला आवश्यक असलेले सर्व एचटीएमएल आणि सीएसएस आवश्यक आहेत. ती जादूची संख्या 14 केबी आहे आणि पहिल्या फेरीच्या-ट्रिप वेळेत (आरटीटी) जास्तीत जास्त कंजिशन विंडोच्या आकारावर आधारित आहे.
गार्डियन येथे फ्रंटएंड तांत्रिक आघाडीवरील पॅट्रिक हेमन आणि त्याच्या टीमने फ्रंटएंड आणि बॅकएंड तंत्राचे मिश्रण वापरून 1000 मीटरचा अडथळा तोडण्यात यश मिळविले. संरक्षकाचा दृष्टीकोन आवश्यक सामग्री - लेख - याची खात्री करुन घेणे वापरकर्त्यास शक्य तितक्या लवकर आणि 14 केबीच्या जादू क्रमांकामध्ये सुनिश्चित करणे आहे.
या प्रक्रियेकडे पाहू:
- एका बातमीच्या कथेवर गुगलच्या दुव्यावर वापरकर्ता क्लिक करते
- लेखासाठी डेटाबेसमध्ये एकच ब्लॉक करण्याची विनंती पाठविली आहे. कोणत्याही संबंधित कथा किंवा टिप्पण्या विनंती नाहीत
- एचटीएमएलमध्ये क्रिटिकल सीएसएस भरलेले आहे
- डोके मध्ये>
- ‘मोहरीचा कट करा’ प्रक्रिया हाती घेतली जाते आणि वापरकर्त्याच्या डिव्हाइस वैशिष्ट्यांनुसार कोणतेही सशर्त घटक लोड केले जातात
- स्वतःच लेखाशी संबंधित किंवा त्यास समर्थन देणारी कोणतीही सामग्री (संबंधित लेख प्रतिमा, लेख टिप्पण्या इत्यादी) जागोजागी आळशी आहेत
यासारख्या गंभीर प्रस्तुत मार्गाचे ऑप्टिमाइझ करणे म्हणजे डोके << 222 ओळी लांब आहे. तथापि, जीझीप केल्यावर वापरकर्त्याने अद्याप पाहण्याची गंभीर सामग्री 14kb प्रारंभिक पेलोडमध्ये येते. ही अशी प्रक्रिया आहे जी 1000 मीटर रेंडरिंग अडथळा तोडण्यात मदत करते.
सशर्त आणि आळशी लोडिंग
सशर्त लोडिंग त्यांच्या डिव्हाइस वैशिष्ट्यानुसार वापरकर्त्याचा अनुभव सुधारते. मॉडर्नर सारखी साधने आपल्याला या वैशिष्ट्यांसाठी चाचणी घेण्याची परवानगी देतात, परंतु हे लक्षात ठेवा की ब्राउझरने समर्थन प्रदान केल्याचे म्हटले आहे म्हणूनच याचा अर्थ असा नाही की संपूर्ण पाठिंबा असतो.
एक तंत्र म्हणजे वापरकर्त्याने ते वैशिष्ट्य वापरण्याचा हेतू दर्शवित नाही तोपर्यंत काहीतरी लोड करणे थांबविणे. हे सशर्त मानले जाईल. जोपर्यंत वापरकर्ता चिन्ह प्रतीक करीत नाही किंवा स्पर्श करीत नाही तोपर्यंत आपण सामाजिक चिन्हांमध्ये लोड करणे थांबवू शकता किंवा आपण एखाद्या लहान समर्पित आयपोर्टवर इफ्रेम गूगल मॅप लोड करणे टाळू शकता जिथे वापरकर्त्यास समर्पित मॅपिंग अनुप्रयोगाशी जोडणे पसंत असेल. दुसरा दृष्टिकोन म्हणजे ‘मोहरी कापून घ्या’ - वरील तपशीलांसाठी वरील बॉक्सआऊट पहा.
आळशी लोडिंग असे निश्चित केले जाते की आपण पृष्ठावर लोड करण्याचा नेहमीच हेतू ठेवता - प्रतिमा, लेख, टिप्पण्या किंवा इतर संबंधित लेखांचा एक भाग असलेल्या प्रतिमा - परंतु वापरकर्त्याने सामग्री वापरण्यास सुरूवात करण्याची आवश्यकता नाही.
मूलभूत
- फायलींसाठी झिजिपिंग सक्षम करा आणि सर्व स्थिर सामग्रीसाठी कालबाह्य शीर्षलेख सेट करा (नेटम.ॅग / एक्स्पायर २60०)
- आळशी लोड jQuery प्लगइन वापरा. व्ह्यूपोर्टजवळ जाताना किंवा ठराविक कालावधीनंतर प्रतिमा लोड करते
प्रगत
- फास्ट किंवा क्लाउडफ्लेअर सेट अप करा. सामग्री वितरण नेटवर्क (सीडीएन) आपल्या स्वत: च्या सर्व्हरपेक्षा वेगवान वापरकर्त्यांकडे आपली स्थिर सामग्री वितरीत करतात आणि त्यांच्याकडे काही विनामूल्य स्तर आहेत
- समांतर HTTP विनंत्यांसारख्या http2 वैशिष्ट्यांचा लाभ घेण्यासाठी http2- सक्षम ब्राउझरसाठी SPDY सक्षम करा
- सामाजिक गणना आपली सामाजिक चिन्हे सशर्त लोड करण्यास परवानगी देते
- स्टॅटिक नकाशे एपीआय वापरणे आपणास प्रतिमांसाठी इंटरएक्टिव्ह Google नकाशे स्विच करण्यास अनुमती देईल. नेटम.एग / स्टॅटिक-260 वर ब्रॅड फ्रॉस्टचे उदाहरण पहा
- अजॅक्स समावेश नमुना डेटा-पूर्वी, डेटा-नंतर किंवा डेटा-पुनर्स्थित गुणविशेषांमधून सामग्री स्निपेट लोड करेल
प्रतिसाद टायपोग्राफी
टायपोग्राफी म्हणजे आपली सामग्री पचविणे सोपे करते. विविध प्रकारच्या उपकरणे आणि व्ह्यूपोर्टवर वाचनीयता सुनिश्चित करण्यासाठी प्रतिसादात्मक टायपोग्राफी हे वाढविते. जॉर्डन मूर ही प्रकार कबूल करण्यास तयार नाही ही एक गोष्ट मान्य करते. आपल्याला आवश्यक असल्यास एक किंवा दोन प्रतिमा ड्रॉप करा, परंतु आपल्याकडे उत्कृष्ट प्रकार असल्याचे सुनिश्चित करा.
स्टीफन हे हे एचटीएमएल फॉन्टचा आकार 100 टक्क्यावर सेट करण्याचे सुचविते (वाचा: फक्त तसाच ठेवा) कारण प्रत्येक ब्राउझर किंवा डिव्हाइस निर्माता विशिष्ट ठराव किंवा डिव्हाइससाठी वाजवी वाचनीय डीफॉल्ट बनविते. बर्‍याच डेस्कटॉप ब्राउझरसाठी हे 16px आहे.
दुसरीकडे, मूर विशिष्ट सामग्री घटकांसाठी किमान फॉन्ट आकार सेट करण्यासाठी आरईएम युनिट आणि एचटीएमएल फॉन्ट-आकार वापरते. उदाहरणार्थ, आपल्यास एखाद्या लेखाची बाह्यरेखा नेहमी 14px रहायची असेल तर ती HTML फॉन्टवर बेस फॉन्ट-आकार म्हणून सेट करा .bline {फॉन्ट-साइज: 1 रीम;} सेट करा. जसे आपण शरीर मोजता: फॉन्ट-आकार: व्ह्यूपोर्टला अनुकूल करण्यासाठी आपण .बाई-लाइन शैलीवर परिणाम करणार नाही.
चांगली वाचन ओळ लांबी देखील महत्त्वपूर्ण आहे - 45 ते 65 वर्णांकरिता लक्ष्य करा. आपण आपली सामग्री तपासण्यासाठी वापरू शकता असे बुकमार्कलेट आहे. आपण आपल्या डिझाइनसह एकाधिक भाषांना समर्थन देत असल्यास लाइनची लांबी देखील भिन्न असू शकते. मूर तेथे सुचवितो की लैंग (डी) लेख {जास्तीत जास्त रुंदी: 30 मी using वापरा.
अनुलंब लय राखण्यासाठी, आपल्या ओळ-उंचीइतकीच सामग्री ब्लॉक, उल>, ऑल>, ब्लॉककोट>, टेबल>, ब्लॉककोट> इत्यादी विरुद्ध मार्जिन-तळ सेट करा. प्रतिमांच्या परिचयात जर लय व्यत्यय येत असेल तर आपण बेसलाइन.जे किंवा बेसलाइनएलिग्न.जे जोडून हे निराकरण करू शकता.
मूलभूत
- आपला फॉन्ट 100 टक्के मुख्यपृष्ठावर ठेवा
- संबंधित इ युनिट्समध्ये कार्य करा
- आपल्या डिझाइनमध्ये अनुलंब लय राखण्यासाठी आपल्या समास आपल्या रेषेच्या उंचीवर सेट करा
प्रगत
- Enhance.js किंवा स्थगित फॉन्ट लोडिंगसह फॉन्ट लोडिंग कार्यप्रदर्शन सुधारित करा
- अर्थपूर्ण शीर्षलेखांसाठी Sass @ समावेश समाविष्ट करा.
- आम्हाला सहसा साइडबार विजेटमध्ये एच 5 शैली वापरण्याची आवश्यकता असते ज्यासाठी एच 2 मार्कअप आवश्यक आहे. आकार नियंत्रित करण्यासाठी दाढीचे टाइपोग्राफिक मिक्सिन वापरा आणि खालील कोडसह अर्थपूर्ण रहा:
. साइडबार एच 2 {@ मथळा -5 inc समाविष्ट करा
जावास्क्रिप्ट मध्ये मीडिया क्वेरी
जेव्हापासून आम्ही माध्यमांच्या प्रश्नांद्वारे विविध व्ह्यूपोर्टमध्ये लेआउट नियंत्रित करू शकलो आहोत, तेव्हापासून आम्ही जावास्क्रिप्ट देखील चालू ठेवण्यासाठी एक मार्ग शोधत आहोत. विशिष्ट व्ह्यूपोर्ट रूंदी, उंची आणि अभिमुखता यावर जावास्क्रिप्ट फायर करण्याचे काही मार्ग आहेत आणि काही स्मार्ट लोकांनी एनक्वायर.जेज आणि सिंपल स्टेट मॅनेजर सारख्या काही वापरण्यास सुलभ मूळ जेएस प्लगइन लिहिले आहेत. आपण मॅचमीडिया वापरुन हे स्वतः तयार करू शकता. तथापि, आपल्याकडे असा मुद्दा आहे की आपल्याला आपल्या मीडिया क्वेरी आपल्या सीएसएस आणि जावास्क्रिप्टमध्ये डुप्लिकेट करण्याची आवश्यकता आहे.
आरोन गुस्ताफसनची सुबक युक्ती आहे याचा अर्थ असा की आपल्याला आपल्या मीडिया क्वेरीज आपल्या सीएसएस आणि आपल्या जेएसमध्ये व्यवस्थापित आणि जुळविण्याची गरज नाही. ही कल्पना मूळतः जेरेमी कीथ कडून आली आहे आणि या उदाहरणात गुस्ताफसनने ती पूर्ण अंमलात आणली आहे.
GetActiveMQ (netm.ag/media-260) वापरुन, शरीराच्या घटकाच्या शेवटी div # getActiveMQ-वाचक इंजेक्ट करा आणि ते लपवा. त्यानंतर सीएसएस सेटमध्ये # getActiveMQ-वाचक {फॉन्ट-फॅमिली: ब्रेक -0; the पहिल्या मीडिया क्वेरीवर, फॉन्ट-फॅमिली: ब्रेक -1; द्वितीय, फॉन्ट-कुटुंब: ब्रेक -2; तिसर्‍या इ.
व्ह्यूपोर्टचा आकार बदलला आहे की नाही हे तपासण्यासाठी स्क्रिप्टमध्ये वॉचराइझ () (नेटम.ॅग / रीसाइज -२-2०) वापरते आणि सक्रिय फॉन्ट-फॅमिली वाचते. आता आपण जेएस संवर्धनांना हुक म्हणून हे वापरू शकता जसे की डीएल> मध्ये टॅब केलेला इंटरफेस जोडणे, जेव्हा व्ह्यूपोर्ट परवानगी देते, लाईटबॉक्सचे वर्तन बदलणे किंवा डेटा टेबलचे लेआउट अद्यतनित करणे. नेटएम.एग / अ‍ॅक्टिव्ह-260 वर getActiveMQ कोडपेन पहा.
मूलभूत
- भिन्न व्ह्यूपोर्टसाठी जावास्क्रिप्ट बद्दल विसरा. वापरकर्त्यांना सर्व व्ह्यूपोर्टवर त्यामध्ये प्रवेश करू शकेल अशा प्रकारे सामग्री आणि वेबसाइट कार्ये प्रदान करा. आम्हाला कधीही जावास्क्रिप्टची आवश्यकता नाही
प्रगत
- मिडिया क्वेरीची पूर्वनिर्धारित यादी म्हणून ब्रेकअप वापरुन आणि गेटएक्टिमक्यूक्यू-व्हॅचरसाठी फॉन्ट कुटुंबांची यादी तयार करणे स्वयंचलितरित्या गुस्ताफसनची पद्धत वाढवा
प्रगतीशील वर्धन
पुरोगामी वर्धित करण्याबद्दल एक सामान्य गैरसमज असा आहे की लोकांचा विचार आहे की, ‘अरेरे मी हे नवीन वैशिष्ट्य वापरू शकत नाही’, पण खरं तर ते अगदी उलट आहे. प्रगतीशील वर्धितीचा अर्थ असा आहे की आपण एखादे वैशिष्ट्य केवळ एक किंवा कोणत्याही ब्राउझरमध्ये समर्थित नसल्यास आपण ते वितरीत करू शकता आणि कालांतराने नवीन आवृत्त्या येताच लोकांना एक चांगला अनुभव मिळेल.
आपण कोणत्याही वेबसाइटचे मुख्य कार्य पाहिले तर आपण ते HTML म्हणून वितरीत करू शकता आणि सर्व्हर साइड सर्व प्रक्रिया करू शकता. देयके, फॉर्म, पसंती, सामायिकरण, ईमेल, डॅशबोर्ड - हे सर्व केले जाऊ शकते. एकदा मूलभूत कार्य तयार झाल्यावर आम्ही त्या वरच्या बाजूला अद्भुत तंत्रज्ञानाची थापी देऊ शकतो कारण त्यातून येणा catch्यांना पकडण्यासाठी आपल्याकडे सुरक्षिततेचे जाळे आहे. आम्ही येथे ज्या प्रगत दृष्टिकोनांबद्दल बोललो आहोत तो बहुतेक पुरोगामी वाढीवर आधारित असतो.
लेआउट
लवचिक मांडणी सांगणे सोपे आहे, परंतु त्याकडे बरेच भिन्न दृष्टिकोन आहेत. कमी मार्कअपसह सोपे ग्रिड लेआउट तयार करा: एन.टी.-चाईल्ड () निवडकर्ता.
/ * ग्रीडसाठी प्रथम मोबाइलची रूंदी घोषित करा * / .ग्रिड-1-4 {फ्लोट: डावे; रुंदी: 100%; } / * जेव्हा व्ह्यूपोर्ट कमीतकमी 37.5 मी आहे तेव्हा प्रति घटक प्रति ग्रिड 50% वर सेट करा * / @ मीडिया (किमान रुंदी: 37.5 मी) {.ग्रिड-1-4 {रुंदी: 50%; } / * प्रथम नंतर प्रत्येक सेकंद घटक फ्लोट साफ करा. हे ग्रीडमधील 3 रा, 5 वा, 7 वा, 9 वा ... लक्ष्य करते. ;} @ मीडिया (मिनिट रूंदी: 64 मी) {.ग्रिड-1-4 {रुंदी: 25%; } / * मागील साफ करा * / .gg-1-4: nth-of-type (2n + 1) {स्पष्ट: काहीही नाही; } / * प्रथम नंतर प्रत्येक 4 था घटक फ्लोट साफ करा. हे ग्रीडमधील 5 व्या, 9 व्या ... ला लक्ष्य करते. * / .Grid-1-4: nth-of-type (4n + 1) {स्पष्ट: डावे; }}
आपल्या लेआउटसाठी पोझिशन आणि फ्लोट वापरुन निरोप घ्या. त्यांनी आम्हाला आजपर्यंत चांगली सेवा दिली आहे, लेआउटसाठी त्यांचा वापर आवश्यक खाच आहे. आम्हाला आता ब्लॉकवर दोन नवीन मुले मिळाली आहेत जी आमच्या सर्व लेआउट फ्लेक्सबॉक्स आणि ग्रीड्सचे निराकरण करण्यात मदत करतील.
प्रत्येक मॉड्यूलमधील सामग्रीच्या तुकड्यांचा लेआउट नियंत्रित करून फ्लेक्सबॉक्स वैयक्तिक मॉड्यूलसाठी उत्कृष्ट आहे. आम्ही वितरित करण्याचा प्रयत्न करीत असलेले लेआउट्स आहेत जे फ्लेक्सबॉक्स वापरुन अधिक सहजतेने मिळवता येतात आणि प्रतिसाद देणार्‍या साइट्सच्या बाबतीत हे अधिक सत्य आहे. यावरील अधिक माहितीसाठी, फ्लेक्सबॉक्स किंवा फ्लेक्सबॉक्स पॉलिफिलसाठी सीएसएस युक्त्या मार्गदर्शक पहा.
सीएसएस ग्रीड लेआउट
मॅक्रो लेव्हल लेआउटसाठी ग्रीड अधिक आहे. ग्रिड लेआउट मॉड्यूल आपल्याला आपल्या CSS मध्ये आपल्या लेआउटचे वर्णन करण्याचा एक चांगला मार्ग देतो. याक्षणी तो मसुद्याच्या टप्प्यात असतानाही, मी रेचेल अँड्र्यू यांनी सीएसएस ग्रीड लेआउटवर या लेखाची शिफारस केली आहे.
शेवटी
आपल्या प्रतिसाद सराव वाढवण्यासाठी या काही टिपा आहेत. कोणत्याही नवीन प्रतिसादात्मक कार्याकडे जाताना, एक पाऊल मागे घ्या आणि आपल्याला मुलभूत गोष्टी ठीक असल्याचे सुनिश्चित करा. आपल्या सामग्रीसह प्रारंभ करा, एचटीएमएल आणि त्यावरील सुधारित अनुभवांचे अनुभव घ्या आणि आपण आपल्या डिझाईन्स कोठे घेऊ शकता याची कोणतीही मर्यादा नाही.
हा लेख मूळतः 260 च्या अंकात प्रकाशित झाला आहे निव्वळ मासिक.
