Bootstrap 3 kesme noktaları ve medya sorguları


171

Üzerinde Bootstrap 3 medya sorguları belgelerine diyor:

Izgara sistemimizdeki anahtar kesme noktalarını oluşturmak için Daha az dosyamızda aşağıdaki medya sorgularını kullanırız.

Ekstra küçük cihazlar (telefonlar, 768 pikselden az): Bootstrap'ta varsayılan bu olduğundan medya sorgusu yok

Küçük cihazlar (tabletler, 768 piksel ve üstü): @media (min-width: @screen-sm-min) { ... }

Orta boy cihazlar (masaüstü bilgisayarlar, 992 piksel ve üstü): @media (min-width: @screen-md-min) { ... }

Büyük cihazlar (büyük masaüstü bilgisayarlar, 1200 piksel ve üstü): @media (min-width: @screen-lg-min) { ... }

Kullandığımız mümkün olması gerekiyordu @screen-sm, @screen-mdve @screen-lgaynı zamanda bizim medya sorguları isimleri? Çünkü benim için çalışmıyor. @media (min-width: 768px) {...}Çalışmadan önce olduğu gibi piksel ölçümlerini kullanmak zorundayım . Yanlış bir şey mi yapıyorum?

Ayrıca, ekstra küçük cihazlar için 480 piksel referans bir yazım hatası mı? Bu 767 piksele kadar değil mi? ( dokümantasyondan kaldırıldığından beri )



BS4'te kullanılan seçiciler. BS4'te "en düşük" ayarı yoktur, çünkü "çok küçük" varsayılan değerdir. Yani önce XS boyutunu kodlarsınız ve daha sonra bu ortamları geçersiz kılarsınız. @media (min-genişlik: 576px) {} @media (min-genişlik: 768px) {} @media (min-genişlik: 992px) {} @media (min-genişlik:
1200px

Yanıtlar:


207

Bootstrap 4 Medya Sorguları

// 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) { ... }

Bootstrap 4, Sass'ta Sass Mixins aracılığıyla ekleyebileceğiniz kaynak CSS sağlar:

@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;
  }
}

Bootstrap 3 Medya Sorguları

/*==========  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) {

}

Bootstrap 2.3.2 Medya Sorguları

@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) {

}

Kaynak kaynağı: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries


8
@ CyrilDuchon-Doris, soru Bootstrap 3 hakkındaydı ... bu yüzden sanmıyorum.
Bagata

12
Cevap 30 puan aldı ve Bootstrap 2'den bahsediyor. Bootstrap 3 kullanılmasa bile birçok kişi buna bir göz atacak. Biraz dışarıda olsa bile güncel cevaplarla kendi cevaplarını düzenleyen kişilere her zaman çok minnettarım. başlangıç ​​kapsamı.
Cyril Duchon-Doris

479'un altında ekstra küçük bir şey var mı?
SuperUberDuper

2
Bootstrap v4 henüz kararlı değil. Farkında mısın? Yanıtın kararlı bir sürüme ulaşmadan önce birçok kez güncellenmesi gerekebilir.
Gherman

Burada aslında bir etkisi olabilecek bir piksel hatası olduğuna inanıyorum. 1200 piksel ve 320 piksel ekranlarda, hem maksimum medya sorgusu hem de minimum medya sorgusu geçerli olur. Tüm maksimum medya sorguları eksi 1 piksel olmalıdır (örneğin 1199 piksel). Minimum ve maksimum 320 piksel ortam sorguları benim için gerçekten anlamlı değil, çünkü AFAIK pratik olarak ekranlar 320 pikselden başlıyor.
Ben Carp

39

Bootstrap medya sorgularını çok iyi belgelemiyor. Olanlar değişkenler @screen-sm, @screen-md,@screen-lg aslında AZ değişkenler ve basit değildir CSS kastediyoruz.

Bootstrap'i özelleştirdiğinizde, ortam sorgusu kesme noktalarını değiştirebilir ve @ screen-xx değişkenlerini derlediğinde, screen-xx olarak tanımladığınız piksel genişliğine değiştirilir. Böyle bir çerçeve bir kez kodlanabilir ve daha sonra son kullanıcı tarafından ihtiyaçlarına göre özelleştirilebilir.

Burada daha fazla netlik sağlayabilecek benzer bir soru: Bootstrap 3.0 Medya sorguları

CSS'nizde, Bootstrap'in yaptıklarını geçersiz kılmak veya eklemek için geleneksel medya sorgularını kullanmaya devam etmeniz gerekir.

İkinci sorunuzla ilgili olarak, bu bir yazım hatası değildir. Ekran 768 pikselin altına düştüğünde, çerçeve tamamen akıcı hale gelir ve herhangi bir cihaz genişliğinde yeniden boyutlandırılarak kesme noktalarına olan ihtiyacı ortadan kaldırır. 480px'deki kesme noktası, mobil optimizasyon düzeninde meydana gelen belirli değişiklikler olduğu için var.

Bunu çalışırken görmek için, sitelerinde bu örneğe gidin ( http://getbootstrap.com/examples/navbar-fixed-top/ ) ve 768 pikselden sonra tasarıma nasıl davrandığını görmek için pencerenizi yeniden boyutlandırın.


6
Bunu çalışırken görmek için, sitelerinde bu örneğe gidin ve 768 pikselden sonra tasarımı nasıl ele aldığını görmek için pencerenizi yeniden boyutlandırın. // Bunun 480 piksel ile ne ilgisi var? 500 piksele kıyasla 480 pikselde farklı bir şey görmüyorum.
Kris Hunt

Bootstrap 3'ün değişken sisteminde doğal olarak genişlediğinde, bu çok etkili bir yaklaşım olduğu için kabul edilen cevap olmalıdır.
klewis

28

Bu sorun https://github.com/twbs/bootstrap/issues/10203 adresinde tartışılmıştır. uyumluluk nedenleriyle çünkü Izgara değiştirmek için bir plan bulunmamaktadır, Artık.

Bootstrap'ı bu çataldan, şubeden alabilirsiniz hs: https://github.com/antespi/bootstrap/tree/hs

Bu dal size 480px'de ekstra bir kesme noktası verir, bu yüzden şunları yapmanız gerekir:

  1. Önce mobil cihazlar için tasarım (XS, 480 pikselden az)
  2. HTML'nize HS (Yatay Küçük Cihazlar) sınıfları ekleyin: col-hs- *, visible-hs, ... ve yatay mobil cihazlar için tasarım (HS, 768 pikselden az)
  3. Tablet cihazlar için tasarım (SM, 992 pikselden az)
  4. Masaüstü cihazlar için tasarım (MD, 1200 pikselden az)
  5. Büyük cihazlar için tasarım (LG, 1200 pikselden fazla)

Tasarım mobil ilk Bootstrap 3 anlamak için anahtardır. Bu BootStrap 2.x büyük değişiklik. Kural şablonu olarak bunu takip edebilirsiniz (LESS içinde):

.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) */
    }
}

1
Üzgünüm, bu çatalın katma değerini anlamıyorum. Anladığım gibi @screen-hs-min:@screen-xs;. Neden @screen-xsdoğrudan burada kullanmıyorsunuz ?
Bass Jobsen

Sadece daha iyi anlamak için. Bu değişken şablona görsel bir tutarlılık kazandırır. Bootstrap 3 Mobil Önce, bu nedenle medya sorgusu dışındaki tüm kurallar mobil boyut içindir. Daha sonra HS için ekstra bir kurala ihtiyacınız varsa yazacaksınız min-width: @screen-hs-min, SM için bir estra kuralına ihtiyacınız varsa yazacaksınız min-width: @screen-sm-minvb. Bu çatal 480 piksele yeni bir kesme noktası eklemek için kullanılır. Daha sonra mobil boyut 480 pikselin altında ve 480 piksel ile 768 piksel arasında yeni bir boyut (HS) görünüyor
Antonio Espinosa

Şablonda küçük bir yazım hatası olduğunu unutmayın. screen-hs-min ekran-xs-min olmalıdır
eflat

@ eflat bu bir yazım hatası değil ve screen-hs-minarasında yeni bir kuralscreen-xs-minscreen-sm-min
Antonio Espinosa

7

Bunun biraz eski olduğunu biliyorum, ama katkıda bulunacağımı düşündüm. Kendimi @Sophy'nin cevabına dayandırırken, bir .xxs kesme noktası eklemek için yaptığım bu oldu. Görünür satır içi, table.visible, vb. Sınıflarla ilgilenmedim.

/*==========  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) {

}

1
Tam olarak ihtiyacım olan şey teşekkürler! Bu yüzden tekrar tekrar yapmam gerekmiyor :)
antoni

Ayrıca, .visible-xs-inline, .visible-xs-inline-blockgeçersiz kılma zaman sınıfları unutmayın .visible-xs!
antoni

6

480 piksele referans kaldırıldı. Bunun yerine şöyle diyor:

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

Bootstrap 3'te 768 pikselin altında bir kesme noktası yok.

@screen-sm-minVe diğer karışımları kullanmak istiyorsanız, daha az derleme yapmanız gerekir, bkz. Http://getbootstrap.com/css/#grid-less

Bootstrap 3 ve LESS'in nasıl kullanılacağına dair bir öğretici: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial


2

CSS'nizi oluşturmak için http://lesscss.org/ kullanıyorsanız bu kesme noktalarını kullanabilmeniz gerekir.

/* 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) {  }

Gönderen https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Aslında @screen-sm-min, _variableLess ile inşa edilirken belirtilen değerle değiştirilen bir değişkendir . Daha Az'ı kullanmazsanız, bu değişkeni aşağıdaki değerle değiştirebilirsiniz:

/* 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) {  }

Bootstrap 3 Sass'ı resmi olarak destekliyor: https://github.com/twbs/bootstrap-sass . Sass kullanıyorsanız (ve yapmalısınız) sözdizimi biraz farklıdır.

/* 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) {  }

1

Bootstrap 4'te kullanılan seçiciler şunlardır. BS4'te "en düşük" ayarı yoktur, çünkü "çok küçük" varsayılan değerdir. Yani önce XS boyutunu kodlarsınız ve daha sonra bu ortamları geçersiz kılarsınız.

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

0

@media (max-width: 768px) kullandığımda tasarımım 768px'de kırılıyor. Ancak 767px'de ve 769px'de sorun yok. Yani, küçük cihazları hedeflemek için maksimum genişlik olarak 767 piksel olacağını düşünüyorum.


0

bootstrap 3 için navbar bileşenimde aşağıdaki kod var

/**
 * 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})";

o zaman böyle bir şey kullanabilirsiniz

@media wide { selector: style }

Bu, değişkenlere ayarladığınız değeri kullanır.

Çıkış, herhangi bir rastgele dizeyi özellik veya değişken değeri olarak kullanmanızı sağlar. ~ "Herhangi bir şey" veya ~ "herhangi bir şey" içindeki herhangi bir şey, enterpolasyon dışında hiçbir değişiklik olmadan olduğu gibi kullanılır.

http://lesscss.org


-6
@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) {



}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.