उत्तरदायी वेब डिज़ाइन

में लेआउट बदलते समय एचटीएमएल तत्वों को स्विच करना, मैं एक उत्तरदायी वेबसाइट बना रहा हूं, और अच्छे उपयोगकर्ता अनुभव के लिए, मुझे मोबाइल से डेस्कटॉप में कुछ लेआउट परिवर्तन की आवश्यकता है। विशेष रूप से, मुझे कुछ HTML तत्वों के क्रम को स्विच करने की आवश्यकता है।उत्तरदायी वेब डिज़ाइन

मुझे डेस्कटॉप बनाम मोबाइल के लिए HTML तत्वों को एक अलग क्रम में होना चाहिए।

मोबाइल

<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div>

आदेश डेस्कटॉप

<div class="one">One</div> 
<div class="three">Three</div> 
<div class="two">Two</div>

यह मैं क्या हासिल करना चाहते हैं के संस्करण सरल है के लिए बंद। मुझे लगता है कि इसे progressive enhancement कहा जाता है। वेब डिज़ाइन विशेषज्ञ कैसे HTML तत्वों को चारों ओर ले जाते हैं? जावास्क्रिप्ट के साथ? क्या यह सामान्य होगा? क्या कोई jQuery प्लगइन्स हैं?

स्रोत

2012-10-12 Lex Semenenko

बस jQuery का उपयोग चारों ओर डोम को बदलने के लिए के रूप में आवश्यक

if (mobile == true) { 

    $('div.three').insertBefore($('div.two')); 
}

स्रोत

2012-10-12 13:12:46 trapper

धन्यवाद की जाँच करें। मुझे यकीन नहीं था कि यह एक अच्छा अभ्यास है या नहीं। मेरे विशेष मामले में, अगर मैं डीओएम में हेरफेर करना चाहता था, तो जिस तरह से मैं नहीं चाहता था, तो एचटीएमएल 5 रूपरेखा प्रभावित हुई थी। ऐसा लगता है कि मुझे अच्छे दृश्य उपयोगकर्ता अनुभव के बीच चयन करना है जो व्यवसाय की आवश्यकता और अच्छी तरह से संरचित एचटीएमएल 5 रूपरेखा को पूरा करता है। –

उदाहरण को 'तीन 'के बजाय' $ (' div.3 ') नहीं पढ़ा जाना चाहिए? – BandonRandon

केवल तभी यदि आप अमान्य सीएसएस चाहते हैं ... :) http://www.w3.org/TR/CSS2/syndata.html#characters – trapper

आप jQuery आप क्या करने की जरूरत करके ऐसा कर सकते डिवाइस की जांच और डालने के अनुसार है यह

भी अपने उत्तरदायी वेब डिज़ाइन जाँच इस qustion पढ़ने के लिए जहाँ आप उस तरह सामान सीखना होगा अच्छा Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

मैं यहां पाया अच्छा सुझाव और भी इस

Beginner’s Guide to Responsive Web Design
Responsive Web Design

स्रोत

2012-10-12 12:32:13

अपने लेआउट पर निर्भर करता है इस प्राप्त करने के तरीके के एक नंबर होगा। यदि आपके divs डेस्कटॉप पर तरफ से खड़े हो रहे हैं और मोबाइल पर लंबवत हैं तो आप उन्हें सही क्रम में प्रदर्शित करने के लिए फ्लोट्स और मीडिया प्रश्नों के संयोजन का उपयोग करने में सक्षम हो सकते हैं।

यदि आपका अंतिम फ़ॉलबैक 4 divs बनाने के लिए नहीं हो सकता है।

<div>one</div> 
<div>three(mobile)</div> 
<div>two</div> 
<div>three(desktop)</div>

फिर डिवाइस के आधार पर प्रासंगिक "तीन" div को छिपाने के लिए मीडिया प्रश्नों का उपयोग करें।

स्रोत

2012-10-12 14:04:40

क्या यह तरीका किसी प्रदर्शन बिंदु से खराब अभ्यास नहीं करेगा? मोबाइल डोम छुपा सामग्री से फूला जाएगा। – JonnyIrving

मेरी राय पर उस मामले में अतिरिक्त div होने के लिए कुछ भी बुरा नहीं है, बल्कि इस तरह की छोटी चीज़ के लिए जेएस का उपयोग करें। – electroid

के बाद कोड मोबाइल में div ढेर होगा और डेस्कटॉप पर यह एक 2 कॉलम लेआउट

<div class="main"> 

</div> 
<div class="aside"> 
</div> 

<style type="text/css"> 
    @media only screen and (min-width: 768px) { 
     .main {float:right;width:60%} 
     .aside {float:left;width:40%} 
    } 
</style>

स्रोत

2013-11-12 08:44:56 piscript

साथ प्रयास करें होगा: प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: कॉलम;

अधिक यहाँ जानकारी: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

स्रोत

2013-11-13 22:35:43 Bruno

क्या आप संबंधित जानकारी को लिंक किए गए पृष्ठ से खींच सकते हैं और इसे उत्तर में पोस्ट कर सकते हैं? यदि लिंक किया गया पृष्ठ बदलता है, तो यह उत्तर बहुत कम मूल्यवान हो जाता है। –

इस सवाल का पुनर्निर्माण करना क्योंकि मैं गूगल के माध्यम से इसे भर में आया, और मौजूदा जवाब पुरानी हैं। समाधान का उपयोग करके मैं only one with the downvote था, इसलिए मैं इसे विस्तारित करूंगा।

display:flex का उपयोग करके आप पुनः आदेश देने के तत्वों column/column-reverse गुण का उपयोग कर सकेंगे:

.container{ display:flex;flex-direction:column } 
@media screen and (min-width:600px) { 
    .container{ flex-direction:column-reverse } 
}

JSFiddle here, और कुछ समर्थन टेबल here देखें।

इसके अलावा एक जोड़ी सीएसएस बाद प्रोसेसर here और here

स्रोत

2016-03-25 16:02:49 mzmm56

और यदि आप तत्वों को साइड-साइड करना चाहते हैं तो आप 'पंक्ति' और 'पंक्ति-रिवर्स' के साथ 'फ्लेक्स-दिशा'' का उपयोग कर सकते हैं। – Yay295

आप उन्हें एक साथ मिश्रण भी कर सकते हैं और तत्वों को एक मामले में एक साथ और दूसरे मामले में एक दूसरे के शीर्ष पर होना चाहिए। – Yay295

उत्तरदायी वेब डिज़ाइन

उत्तर

संबंधित मुद्दे