फाउंडेशन - एक्स (एक्स) बड़े के लिए समर्थन? - ज़र्ब-फाउंडेशन

मैंने फाउंडेशन के साथ खेलना शुरू कर दिया है और मुझे एहसास हुआ कि बड़ी स्क्रीन का समर्थन करने की संभावना थी लेकिन मुझे नहीं पता कि कैसे सक्षम किया जाए।

जो मैं मूल रूप से करना चाहता हूं वह सक्षम हैबड़ी स्क्रीन (1920px तक) को संबोधित करने के लिए और विभिन्न तरीकों से उन अतिरिक्त ब्रेकपॉइंट्स का उपयोग करें उदाहरण के लिए यह निर्दिष्ट करने की क्षमता कि ब्लॉक ग्रिड के कितने तत्व xxlarge, xlarge, बड़े, पर प्रदर्शित किए जाने हैं ...

मैंने सेटिंग्स फ़ाइल की जांच की है और वहां कुछ ऐसी चीजें हैं जो इसे संभवतः इंगित करती हैं।

मैंने पहली बार असम्बद्ध किया है:

//$row-width: rem-calc(1000);

और इसे सेट करें:

$row-width: rem-calc(1920);

इसके साथ में मैं देखता हूं कि मेरी एड्रेसेबल स्क्रीन बड़ी है लेकिन ब्रेकपॉइंट अभी भी वही हैं।

मैंने यह भी असम्बद्ध किया है:

$large-breakpoint:  em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

...आदि.. (और डी। मीडिया क्वेरी में लगभग सब कुछ खंड खंड)

$include-xl-html-grid-classes: true;
$include-xl-html-block-grid-classes: true;

लेकिन यहां तक ​​कि यह सब सक्षम होने के साथ, ब्रेकपॉइंट्स अभी भी इस तरह की एक साधारण चीज़ के साथ काम नहीं करते हैं:

<div class="row">
<div class="xlarge-12 columns">content</div>
</div>

यह बड़े -12 के समान आकार के एक div को प्रदर्शित करता है

कोई उपाय?

धन्यवाद लॉरेंट

उत्तर:

उत्तर № 1 के लिए 1

$row-width यह आपकी जानकारी के लिए है ज्यादा से ज्यादा सामग्री की चौड़ाई। नींव ग्रिड 12 कॉलम है, इसलिए किसी भी div के साथ {size}-12 100% चौड़ा होगा। यही कारण है कि बड़े -12 और xlarge-12 divs एक ही चौड़ाई होगी।

बड़ी स्क्रीन पर सामग्री को छोटा बनाने और xlarge स्क्रीन पर बड़े बनाने के लिए, इसे आज़माएं:

<div class="row">
<div class="large-10 xlarge-12 columns">content</div>
</div>

संबंधित सवाल
सबसे लोकप्रिय