1. घर
  2. सवाल और जवाब
  3. उत्तरदायी डिजाइन

उत्तरदायी डिजाइन

2013-06-14 12 views
10

में नीचे दिए गए तत्व को स्थानांतरित करने का सबसे अच्छा तरीका क्या है मेरे पास निम्न HTML प्रारूप है, डेस्कटॉप पर शीर्ष पर दिया गया तत्व और मोबाइल उपकरणों पर नीचे दिए गए तत्व को स्थान देने का प्रभावी तरीका क्या है (चौड़ाई < 640 पिक्सेल)? चूंकि बहुत सारे डिवाइसेज हैं, इसलिए मैं पेज की ऊंचाई की सामग्री अलग-अलग होने के बाद स्थिति निर्देशांक लिखना नहीं चाहता हूं। कोई सुझाव?उत्तरदायी डिजाइन

<html> 
<head> 
.. 
</head> 
<body> 
.. 
<p>I am on the top of desktop page, and bottom of mobile page</p> 
... 
</body> 
</html>

स्रोत

2013-06-14 Suthan Bala

उत्तर

17

किसी उत्तरदायी फैशन में अज्ञात ऊंचाइयों के पुनर्वित्त तत्वों को फ्लेक्सबॉक्स के साथ सबसे अच्छा किया जा सके। जबकि डेस्कटॉप ब्राउज़र के लिए समर्थन बहुत अच्छा नहीं है (आईई प्राथमिक प्राथमिक कारक है, समर्थन v10 के साथ शुरू होता है), अधिकांश मोबाइल ब्राउज़र इसका समर्थन करते हैं।

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) { 
    .container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    /* optional */ 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -ms-flex-align: start; 
    -webkit-align-items: flex-start; 
    align-items: flex-start; 
    } 

    .container .first { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
    } 
}

http://caniuse.com/#feat=flexbox

पता है कि इस तरह के flexbox ठेठ ग्रिड तकनीक के रूप में अन्य लेआउट तरीकों, के साथ संघर्ष कर सकते। फ्लेक्स आइटम जो फ्लोट पर सेट हैं, 200 9 विनिर्देश (display: -webkit-box) का उपयोग कर वेबकिट ब्राउज़र में अप्रत्याशित परिणाम पैदा कर सकते हैं।

स्रोत

2013-06-14 20:27:18 cimmanon

1

मैं अगर यह सबसे अच्छा तरीका है पता नहीं है, लेकिन आप एक ही तत्व आप जहां चाहें, दोहराने और display: none/display: inline-block विशेषता के साथ निभा सकता है। जब यह डेस्कटॉप पर देखा जाता है, तो आपका सीएसएस इसे शीर्ष पर प्रदर्शित करने के लिए कहता है, न कि नीचे वाला। फिर, जब मोबाइल पर देखा जाता है, तो उसे शीर्ष पर प्रदर्शित नहीं करना चाहिए और नीचे एक को प्रदर्शित करना चाहिए।

जैसा मैंने कहा, मुझे यकीन नहीं है कि यह करने का यह सबसे प्रभावी तरीका है, लेकिन यह काम करता है। अगर किसी और के पास बेहतर समाधान है, तो मुझे यह सुनना अच्छा लगेगा।

स्रोत

2013-06-14 19:39:44

0

मुझे लगता है कि जब आप "पोस्टियन" कहते हैं तो आपका मतलब है कि जब आप स्क्रॉल करते हैं तो यह स्थानांतरित नहीं होता है। उस मामले में आप इस्तेमाल कर सकते हैं:

p.className { 
    position: fixed; 
    bottom: 0; // for mobile devices 
    top: 0; // for desktops 
}

कहाँ पी तत्व इस तरह एक वर्ग विशेषता हो जाता है:

<p class="className">I am on the...</p>

नीचे & शीर्ष एक ही समय में मौजूद नहीं होता आप आधारित प्रासंगिक एक लोड करने के लिए की आवश्यकता होगी उपकरण पर। डेस्कटॉप के लिए आपको div की ऊंचाई के साथ अपनी सामग्री को ऑफ़सेट करने की भी आवश्यकता होगी ताकि यह निश्चित div

स्रोत

2013-06-14 19:43:40 Precastic

4

बेहतर flexbox से अनुकूलता display: table-footer-group (IE8 +)
प्रभाव विपरीत के साथ प्राप्त किया जा सकता है: एक तत्व से अधिक यह एचटीएमएल कोड में है स्थानांतरित करने के लिए, आप table-caption और table-header-group कोशिश कर सकते हैं।

img या input तरह स्वयं प्रतिस्थापित तत्वों के साथ काम करता है नहीं, कम से कम क्रोम पर (और कहा कि काफी सामान्य है), लेकिन उदाहरण के लिए div के साथ ठीक।

संपादित करें: यह 2016 इतना flexbox (और Autoprefixer) सब बातों \ o/

है

स्रोत

2013-06-14 22:31:30 FelipeAls

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

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