Milligram: ग्रिड तत्व: छोटी स्क्रीन पर पूरी चौड़ाई, बड़ी स्क्रीन पर छोटी चौड़ाई?

को निर्मित 12 जन॰ 2017 · 8टिप्पणियाँ · स्रोत: milligram/milligram

पहली बार बस मिलीग्राम की जाँच कर रहा हूँ। शायद मुझे कुछ याद आ रहा है, लेकिन मेरे पास छोटे स्क्रीन पर ग्रिड कॉलम 100% कैसे हो सकता है और फिर बड़ी स्क्रीन पर 50% पर स्विच कैसे हो सकता है? क्या यह सीएसएस में उस वर्ग के साथ बनाया गया है जिसे मैं नहीं देख रहा हूं या क्या मुझे इसे अपने प्रोजेक्ट में ओवरराइड करना है?

Hacktoberfest new feature

स्रोत

mikeriley131

👍8 ❤1 🎉1

सबसे उपयोगी टिप्पणी

@cjpatoilo मैं आपको सुनता हूं और मैं सहमत हूं कि मुझे मिलिग्राम के बारे में ठीक यही पसंद है ... बस न्यूनतम ... लेकिन मेरे लिए यह एक बुनियादी और आवश्यक उत्तरदायी डिजाइन सुविधा है।

guillaumemolter 28 जन॰ 2017

👍9

सभी 8 टिप्पणियाँ

इसे मेरे ध्यान में लाने के लिए धन्यवाद @ mikeriley131 । मैं एक प्रोजेक्ट पर मिलिग्राम का उपयोग शुरू करने वाला था लेकिन यह एक बड़ी गायब विशेषता है। इसे मैन्युअल रूप से जोड़ना बहुत कठिन नहीं है, लेकिन एक सीएसएस ढांचे का उद्देश्य नहीं है कि आपको इसे हाथ से करने की आवश्यकता नहीं है :-)।

guillaumemolter 20 जन॰ 2017

नमस्कार दोस्तों @mikeriley131 @guillaumemolter

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

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

अपने विचार हमारे साथ साझा करने के लिए धन्यवाद।

cjpatoilo 28 जन॰ 2017

guillaumemolter 28 जन॰ 2017

👍9

ठीक है, धन्यवाद @cjpatoilo। पीआर बनाने में खुशी हुई, बस यह सुनिश्चित करना चाहता था कि मैं पहले कुछ याद नहीं कर रहा था।

mikeriley131 30 जन॰ 2017

@ mikeriley131 मदद करने में खुशी हुई, पीआर की समीक्षा करें, आदि ...

guillaumemolter 30 जन॰ 2017

उत्तरदायी ग्रिड सुविधा जोड़ने के लिए पुल अनुरोध 155 बनाया गया: https://github.com/milligram/milligram/pull/155

http://codepen.io/csuttie/pen/BWQMwM . पर डेमो

CSuttie 8 मार्च 2017

मैंने एक मीडिया प्रश्न के साथ खिलवाड़ किया, मेरे साथ रहो। मैं एक ऐसा व्यक्ति हूं जो बैक-एंड सामान पसंद करता है और अपना अधिकांश समय लिनक्स के साथ खेलता है इसलिए नमक के दाने के साथ मेरे फ्रंट-एंड डेवलपमेंट को लें। इसके अलावा मैंने किसी भी सीएसएस प्री-प्रोसेसर में कुछ भी नहीं किया है।

<strong i="6">@media</strong> (min-width: 495px) and (max-width:800px) {
    .row .column[class*=" column-"] {
        max-width: 100%;
    }
}

यह बच्चे या ग्रैंड-चाइल्ड में .row के साथ .column से मेल खाता है (आप .row और .column के बीच में एक तत्व भी क्यों चाहते हैं? ) जिसके बाद एक .column-* है जहां * एक वाइल्ड-कार्ड है।

तुम क्या सोचते हो?

टिप्पणी : 495 पिक्सल की सीमा है क्योंकि क्रोम ने मुझे न्यूनतम आकार की राशि की अनुमति दी है। 800px की कोई महत्वपूर्ण टिप्पणी नहीं है।

Lilja 2 अप्रैल 2017

👍3

@cjpatoilo ओई!
मुझे लगता है कि @Lilja कोड स्निपेट मिलीग्राम में होना चाहिए, मेरा सुझाव है कि हम मोबाइल में पूरी चौड़ाई वाले कॉलम में .responsive वर्ग रखें, हालांकि वे कुछ% पर सेट हैं।

<strong i="10">@media</strong> (max-width: 40rem) {
    .row .column.responsive[class*=" column-"] {
        margin-left: 0;
        max-width: 100%;
    }
}

तो मोबाइल स्क्रीन में, यह:

यह बन जाएगा:

promatik 14 सित॰ 2018

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Milligram: ग्रिड तत्व: छोटी स्क्रीन पर पूरी चौड़ाई, बड़ी स्क्रीन पर छोटी चौड़ाई?

सबसे उपयोगी टिप्पणी

सभी 8 टिप्पणियाँ

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