Milligram: عناصر الشبكة: العرض الكامل على الشاشات الصغيرة ، والعرض الصغير على الشاشات الكبيرة؟

شكرًا على لفت انتباهي إلى هذا @ mikeriley131 . كنت على وشك البدء في استخدام Milligram في مشروع ولكن هذه ميزة كبيرة مفقودة. ليس من الصعب إضافته يدويًا ، ولكن ليس الغرض من إطار عمل css الذي لا تحتاج إلى القيام بذلك يدويًا :-).

مرحبًا يا شباب @ mikeriley131guillaumemolter

حاليًا لا يدعم Milligram هذه الوظيفة لكني أحببت الفكرة. في البداية تم إنشاء Milligram بغرض أن يكون أبسط إطار عمل ، مع تحديد الحد الأدنى فقط من الأنماط الممكنة. لذلك لا يحتوي على العديد من الميزات التي يمكن العثور عليها بسهولة في أطر العمل الكبيرة.

سأفكر في شيء ما ولكن إذا كان لديك أي فكرة عن كيفية تنفيذ هذه الوظيفة وترغب في تقديم PR ، فلا تتردد.

شكرا لتقاسم أفكارك معنا.

cjpatoilo أسمعك وأنا أتفق معك أن هذا هو بالضبط ما أعجبني في مليغرام ... فقط الحد الأدنى ... ولكن بالنسبة لي ، هذه ميزة أساسية وأساسية للتصميم سريع الاستجابة.

حسنًا ، شكرًاcjpatoilo. يسعدني إنشاء علاقات عامة ، أردت فقط التأكد من أنني لم أفوت شيئًا أولاً.

@ mikeriley131 يسعدني المساعدة ، مراجعة العلاقات العامة ، إلخ ...

تم إنشاء طلب السحب 155 لإضافة ميزة الشبكة المتجاوبة: https://github.com/milligram/milligram/pull/155

عرض توضيحي على http://codepen.io/csuttie/pen/BWQMwM

لقد تلاعبت باستعلام إعلامي ، تحمل معي. أنا رجل يحب الأشياء الخلفية ويلعب مع Linux معظم وقتي ، لذا خذ تطوير الواجهة الأمامية بحذر. كما أنني لم أفعل أي شيء في أي معالج css مسبق.

<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 يجب أن يكون بالمليجرام ، اقتراحي هو وضع فئة .responsive في الأعمدة التي نريد أن تكون كاملة العرض في الهاتف المحمول ، على الرغم من أنها مضبوطة على بعض ٪.

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

لذلك في شاشات الجوال ، هذا:

سيصبح هذا: