बूटस्ट्रैप 3 ब्रेकप्वाइंट और मीडिया क्वेरी

Question

पर बूटस्ट्रैप 3 मीडिया क्वेरी प्रलेखन यह कहते हैं:

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

अतिरिक्त छोटे डिवाइस (फोन, 768px से कम): बूटस्ट्रैप में यह डिफ़ॉल्ट होने के बाद से कोई मीडिया क्वेरी नहीं है

छोटे उपकरण (टैबलेट, 768px और ऊपर): @media (min-width: @screen-sm-min) { ... }

मध्यम उपकरण (डेस्कटॉप, 992px और ऊपर): @media (min-width: @screen-md-min) { ... }

बड़े उपकरण (बड़े डेस्कटॉप, 1200px और ऊपर): @media (min-width: @screen-lg-min) { ... }

हम उपयोग करने में सक्षम होना चाहिए रहे हैं @screen-sm, @screen-mdऔर @screen-lgसाथ ही हमारे मीडिया प्रश्नों में नाम? क्योंकि यह मेरे लिए काम नहीं करता है। मुझे पिक्सेल माप का उपयोग @media (min-width: 768px) {...}करना होगा जैसे कि यह काम करेगा। क्या मुझसे कुछ गलत हो रही है?

इसके अलावा, अतिरिक्त छोटे उपकरणों के लिए 480px का संदर्भ एक टाइपो है? 767px तक नहीं कहना चाहिए? ( चूंकि प्रलेखन से हटा दिया गया है )

Comments

stackoverflow.com/questions/24066059/…

— paulalexandru

यहां बीएस 4 में चयनकर्ताओं का उपयोग किया गया है। बीएस 4 में कोई "सबसे कम" सेटिंग नहीं है क्योंकि "अतिरिक्त छोटा" डिफ़ॉल्ट है। यानी आप पहले XS साइज को कोड करेंगे और फिर बाद में इन मीडिया को ओवरराइड करेंगे। @media (न्यूनतम-चौड़ाई: 576px) {} @media (न्यूनतम-चौड़ाई: 768px) {} @media (न्यूनतम-चौड़ाई: 992px) {} @media (न्यूनतम-चौड़ाई: 1200px) {}

— बाबूदीप सिंह

Answer 1

बूटस्ट्रैप 4 मीडिया क्वेरी

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

बूटस्ट्रैप 4 Sass में स्रोत CSS प्रदान करता है जिसे आप Sass Mixins के माध्यम से शामिल कर सकते हैं:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

बूटस्ट्रैप 3 मीडिया क्वेरी

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

बूटस्ट्रैप 2.3.2 मीडिया क्वेरी

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

संसाधन से: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Comments

@ CyrilDuchon-Doris, सवाल बूटस्ट्रैप 3 के बारे में था ... तो मुझे ऐसा नहीं लगता।

— बागटा

उत्तर 30 अंक से सम्मानित किया गया था और बूटस्ट्रैप 2 का उल्लेख किया गया है। बहुत से लोग इस पर एक नज़र रखेंगे भले ही बूटस्ट्रैप 3 का उपयोग न करें। मैं हमेशा उन लोगों का बहुत आभारी हूं जो अप-टू-डेट जानकारी के साथ अपना जवाब संपादित करते हैं, भले ही थोड़ा बाहर प्रारंभिक दायरे का।

— सिरिल डचोन-डोरिस

तो 479 से नीचे कुछ अतिरिक्त है?

— सुपरयूपरड्यूपर

बूटस्ट्रैप v4 अभी भी स्थिर नहीं है। क्या आप इसके बारे में जानते हैं? स्थिर रिलीज पर पहुंचने से पहले उत्तर को कई बार अपडेट करना पड़ सकता है।

— घूमर

मेरा मानना ​​है कि यहाँ एक पिक्सेल गलती है, जिसका वास्तव में प्रभाव हो सकता है। 1200px और 320 px स्क्रीन के लिए, अधिकतम मीडिया क्वेरी और मिनट मीडिया क्वेरी दोनों प्रभावी होंगे। सभी अधिकतम मीडिया क्वेरी माइनस 1px (उदाहरण के लिए 1199px) होनी चाहिए। जब तक AFAIK व्यावहारिक रूप से 320px से शुरू हो जाता है, तब से अधिकतम और अधिकतम 320px मीडिया प्रश्न वास्तव में मेरे लिए मायने नहीं रखते हैं।

— बेन कार्प

Answer 2

बूटस्ट्रैप मीडिया के प्रश्नों को बहुत अच्छी तरह से प्रलेखित नहीं करता है। से वे चर @screen-sm, @screen-md, @screen-lgवास्तव में कम चर और सरल नहीं सीएसएस की बात कर रहे।

जब आप बूटस्ट्रैप को अनुकूलित करते हैं तो आप मीडिया क्वेरी ब्रेकप्वाइंट को बदल सकते हैं और जब यह संकलित करता है @ स्क्रीन-एक्सएक्स चर को स्क्रीन-एक्सएक्सएक्स के रूप में परिभाषित किया जाता है। इस तरह से एक फ्रेमवर्क को एक बार कोड किया जा सकता है और फिर अंतिम उपयोगकर्ता द्वारा उनकी आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है।

यहां एक समान प्रश्न जो अधिक स्पष्टता प्रदान कर सकता है: बूटस्ट्रैप 3.0 मीडिया प्रश्न

अपने CSS में, बूटस्ट्रैप को ओवरराइड करने या जोड़ने के लिए आपको अभी भी पारंपरिक मीडिया प्रश्नों का उपयोग करना होगा।

आपके दूसरे प्रश्न के संबंध में, वह टाइपो नहीं है। एक बार जब स्क्रीन 768px से नीचे चली जाती है, तो फ्रेमवर्क पूरी तरह से तरल हो जाता है और किसी भी उपकरण की चौड़ाई पर आकार बदल जाता है, जिससे ब्रेकप्वाइंट की आवश्यकता दूर हो जाती है। 480px पर ब्रेकपॉइंट मौजूद है क्योंकि मोबाइल ऑप्टिमाइज़ेशन के लिए लेआउट में विशिष्ट परिवर्तन होते हैं।

इस क्रिया को देखने के लिए, इस उदाहरण पर उनकी साइट ( http://getbootstrap.com/examples/navbar-fixed-top/ ) पर जाएं , और अपनी विंडो का आकार बदलकर देखें कि यह 768px के बाद डिज़ाइन के साथ कैसा व्यवहार करता है।

Comments

इस क्रिया को देखने के लिए, उनकी साइट पर इस उदाहरण पर जाएं, और अपनी विंडो का आकार देखें कि यह 768px के बाद डिज़ाइन के साथ कैसा व्यवहार करता है। // 480px के साथ क्या करना है? मुझे 500 पिक्सेल की तुलना में 480 पिक्सेल पर कुछ भी अलग नहीं दिखाई दे रहा है।

— क्रिश हंट

जहाँ तक बूटस्ट्रैप 3 की परिवर्तनशील प्रणाली पर स्वाभाविक रूप से विस्तार है, यह स्वीकृत उत्तर होना चाहिए, क्योंकि यह एक बहुत ही कुशल दृष्टिकोण है।

— क्लेविस

Answer 3

इस मुद्दे पर https://github.com/twbs/bootstrap/issues/10203 में चर्चा की गई है। अब तक, ग्रिड को बदलने की कोई योजना नहीं है क्योंकि संगतता कारण हैं।

आप इस कांटे, शाखा से बूटस्ट्रैप प्राप्त कर सकते हैं hs: https://github.com/antespi/bootstrap/tree/ks

यह शाखा आपको 480px पर एक अतिरिक्त ब्रेकपॉइंट देती है, इसलिए आपको निम्न करना होगा:

1. मोबाइल के लिए डिज़ाइन पहले (XS, 480px से कम)
2. अपने HTML में HS (क्षैतिज छोटे उपकरण) वर्ग जोड़ें: col-hs- *, दृश्य-hs, ... और क्षैतिज मोबाइल उपकरणों के लिए डिज़ाइन (HS, 768px से कम)
3. टैबलेट डिवाइसों के लिए डिज़ाइन (SM, 992px से कम)
4. डेस्कटॉप उपकरणों के लिए डिज़ाइन (MD, 1200px से कम)
5. बड़े उपकरणों के लिए डिज़ाइन (LG, 1200px से अधिक)

डिजाइन मोबाइल सबसे पहले बूटस्ट्रैप को समझने की कुंजी है। यह बूटस्ट्रैप 2.x से प्रमुख परिवर्तन है। एक नियम टेम्पलेट के रूप में आप इसका अनुसरण कर सकते हैं (LESS में):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

Comments

क्षमा करें, मुझे इस कांटे का जोड़ा मूल्य समझ में नहीं आ रहा है। जैसा कि मैं तुम्हें समझ रहा हूँ @screen-hs-min:@screen-xs;। @screen-xsयहाँ सीधे उपयोग क्यों नहीं ?

— बास जॉब्सन

बस बेहतर उपक्रम के लिए। यह चर टेम्पलेट के लिए एक दृश्य स्थिरता देता है। बूटस्ट्रैप 3 मोबाइल फर्स्ट है, इसलिए मीडिया-क्वेरी के बाहर के सभी नियम मोबाइल आकार के लिए हैं। फिर यदि आपको एचएस के लिए एक अतिरिक्त नियम की आवश्यकता है min-width: @screen-hs-min, तो आप नीचे लिखेंगे , यदि आपको एसएम के लिए एक एस्ट्रा नियम की आवश्यकता है, तो आप नीचे लिखेंगे min-width: @screen-sm-min, और इसी तरह। यह कांटा 480px में एक नया ब्रेकप्वाइंट जोड़ने के लिए उपयोग किया जाता है। तब मोबाइल का आकार 480px से कम होता है और 480px और 768px के बीच एक नया आकार (HS) दिखाई देता है

— एंटोनियो एस्पिनोसा

ध्यान दें कि टेम्पलेट में थोड़ा टाइपो है। स्क्रीन-एचएस-मिन स्क्रीन-एक्सएस-मिन होना चाहिए

— एफ्लैट

@ एफ्लाट यह एक टाइपो त्रुटि नहीं है, के screen-hs-minबीच एक नया नियम है screen-xs-minऔरscreen-sm-min

— एंटोनियो एस्पिनोसा

Answer 4

मुझे पता है कि यह थोड़ा पुराना है, लेकिन मुझे लगा कि मैं इसमें योगदान दूंगा। @Sophy द्वारा खुद को जवाब देने पर, यह मैंने एक .xxs ब्रेकपॉइंट को जोड़ने के लिए किया। मैंने दृश्य-इनलाइन, तालिका। अदृश्य आदि वर्गों का ध्यान नहीं रखा है।

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Comments

वास्तव में मुझे क्या चाहिए धन्यवाद! इसलिए मुझे इसे फिर से करने की ज़रूरत नहीं है :)

— एंटोनी

जब .visible-xs-inline, .visible-xs-inline-blockभी आप ओवरराइड करते हैं, तब भी कक्षाओं को न भूलें .visible-xs!

— एंटोनी

Answer 5

480px का संदर्भ हटा दिया गया है। इसके बजाय यह कहता है:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

बूटस्ट्रैप 3 में 768px से नीचे कोई ब्रेकपॉइंट नहीं है।

यदि आप @screen-sm-minऔर अन्य मिश्रणों का उपयोग करना चाहते हैं, तो आपको LESS के साथ संकलन करने की आवश्यकता है, http://getbootstrap.com/css/#grid-less देखें

यहाँ बूटस्ट्रैप 3 और लेस का उपयोग करने के बारे में एक ट्यूटोरियल दिया गया है: http://www.helloerik.com/bootstrap-3-less-workflowt-tutorial

Answer 6

यदि आप अपने CSS को बनाने के लिए http://lesscss.org/ का उपयोग करते हैं, तो आपको उन ब्रेकप्वाइंट का उपयोग करने में सक्षम होना चाहिए ।

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

से https://getbootstrap.com/docs/3.4/css/#grid-media-queries

वास्तव @screen-sm-minमें एक वैरिएबल है _variableजब कम के साथ निर्माण करते समय निर्दिष्ट मान द्वारा प्रतिस्थापित किया जाता है । यदि आप कम का उपयोग नहीं करते हैं, तो आप इस चर को मान से बदल सकते हैं:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

बूटस्ट्रैप 3 आधिकारिक तौर पर सैस का समर्थन करता है: https://github.com/twbs/bootstrap-sass । यदि आप Sass (और आपको चाहिए) का उपयोग कर रहे हैं, तो वाक्यविन्यास थोड़ा अलग है।

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }

Answer 7

यहां बूटस्ट्रैप 4 में चयनकर्ताओं का उपयोग किया गया है। बीएस 4 में कोई "सबसे कम" सेटिंग नहीं है क्योंकि "अतिरिक्त छोटा" डिफ़ॉल्ट है। यानी आप पहले XS साइज को कोड करेंगे और फिर बाद में इन मीडिया को ओवरराइड करेंगे।

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Answer 8

जब मैं @media (अधिकतम-चौड़ाई: 768px) का उपयोग करता हूँ तो मेरा डिज़ाइन 768px पर टूट जाता है। लेकिन यह 767px पर और 769px पर भी ठीक है। तो, मुझे लगता है कि यह छोटे उपकरणों को लक्षित करने के लिए अधिकतम-चौड़ाई के रूप में 767px होगा।

Answer 9

बूटस्ट्रैप 3 के लिए मेरे नेवबार घटक में निम्नलिखित कोड हैं

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

तो आप कुछ का उपयोग कर सकते हैं

@media wide { selector: style }

यह आपके द्वारा निर्धारित चर का जो भी मूल्य है उसका उपयोग करता है।

बचना आपको किसी भी मनमानी स्ट्रिंग को संपत्ति या चर मूल्य के रूप में उपयोग करने की अनुमति देता है। अंदर कुछ भी ~ "कुछ भी" या ~ 'कुछ भी' का उपयोग किया जाता है, जैसे कि प्रक्षेप के अलावा कोई परिवर्तन नहीं होता है।

http://lesscss.org

Answer 10

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}