मैं अभी उत्तरदायी CSS में गोताखोरी कर रहा हूँ औरडिजाइन, और मैं सोच रहा हूं कि मैं कैसे विभिन्न उपकरण चौड़ाई का पता लगाने वाला हूं। मैं हर दिन हर एक मोबाइल डिवाइस का परीक्षण करने के लिए दिन बिताना नहीं चाहता, मैं सिर्फ यह चाहता हूं कि जहां यह काम करता है, उसके लिए उत्तरदायी लेआउट प्राप्त करें।
मैंने कुछ साइटों का उपयोग करके देखा @media only screen and (max-device-width: xx) लेकिन ऐसा लगता है कि यह बहुत विशिष्ट प्रस्तावों तक सीमित है, वास्तविक ब्राउज़र विंडो आकार नहीं।
सभी में कोई सलाह बहुत अच्छा होगा। मैं वेब विकास या CSS के लिए नया नहीं हूं, लेकिन उत्तरदायी डिजाइन के लिए पूरी तरह से नया हूं।
उत्तर:
उत्तर № 1 के लिए 16ऐसा लगता है कि आप "यह पता लगाने की कोशिश कर रहे हैं कि कहां और कब अपना आवेदन करना है breakpoints.
उपकरणों के एक समूह पर परीक्षण रिज़ॉल्यूशन के बजाय एक उत्तरदायी डिज़ाइन का निर्माण क्यों न करें जो स्वीकार्य है प्रत्येक संकल्प? प्रत्येक डिवाइस के लिए उत्तरदायी वेबसाइटों को ठीक करने वाले कोई जादू के ब्रेकप्वाइंट नहीं हैं क्योंकि हर उत्तरदायी वेबसाइट लेआउट, सामग्री, आदि के आधार पर अलग-अलग हो रही है और अलग-अलग प्रस्तावों के साथ विभिन्न उपकरणों के टन हैं।
आप सोच रहे होंगे, "क्या बकवास है, मैं पिक्सेल द्वारा पिक्सेल नहीं जा रहा हूं और अपनी वेबसाइट की जांच करूंगा,"लेकिन यह वास्तव में मेरा मतलब नहीं है।
- एक ब्राउज़र में कूदो, अपनी वेबसाइट पर नेविगेट करें, और कंसोल खोलें
- व्यूपोर्ट को बहुत कम रिज़ॉल्यूशन पर आकार दें। 320px एक अच्छा प्रारंभिक बिंदु है।
(ध्यान दें: कंसोल में व्यूपोर्ट टाइप window.innerWidth का साइज पाने के लिए। देख साधन अपनी डिजाइन डीबगिंग को बढ़ाने के और तरीकों के लिए) - अपने लेआउट का विश्लेषण करें। यह इस संकल्प को कैसे देखता है? यदि आपको इस रिज़ॉल्यूशन में लेआउट बदलने की आवश्यकता है, तो ब्रेकप्वाइंट जोड़ने का समय!
- धीरे-धीरे ब्राउज़र विंडो को तब तक स्ट्रेच करें जब तक कि कुछ टूट न जाए या भयानक न दिखे। इस बिंदु पर आपको एक और ब्रेकपॉइंट डालने की आवश्यकता होगी।
- अपने दिल की सामग्री के लिए चरण 4 को दोहराएं
याद रखो:
आपकी साइट को सभी उपकरणों पर अच्छा बनाने के लिए उत्तरदायी डिज़ाइन isn "t की बात है, जिससे आपकी सामग्री अच्छी दिखे कहीं भी - सैम रिचर्ड्स
संसाधन:
- उत्तरदायी वेब डिज़ाइन - एंथनी के साथ प्रोग्रामिंग
- उत्तरदायी टाइपोग्राफी
- अपने उत्तरदायी डिजाइन के लिए तार्किक विराम बिंदु
- जैसा कि उपरोक्त वीडियो में बताया गया है, Modernizr एक भयानक JS लाइब्रेरी है जो डिवाइस-विशिष्ट सुविधाओं का पता लगाने में मदद करती है
- फ़ायरफ़ॉक्स 15 में उत्तरदायी डिज़ाइन व्यू फ़ीचर
- क्रोम के लिए उत्तरदायी डिज़ाइन व्यू ट्यूटोरियल