Bootstrap 3 kesme noktaları ve medya sorguları

Bootstrap 3 medya sorguları belgesinde]1 şöyle yazıyor:

Izgara sistemimizdeki önemli kırılma noktalarını oluşturmak için Less dosyalarımızda aşağıdaki medya sorgularını kullanıyoruz.

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

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

Orta ölçekli 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) { ... }

Medya sorgularımızda @screen-sm, @screen-md ve @screen-lg adlarını da kullanabilmemiz gerekiyor mu? Çünkü benim için çalışmıyor. Çalışması için @media (min-width: 768px) {...} gibi piksel ölçülerini kullanmam gerekiyor. Yanlış bir şey mi yapıyorum?

Ayrıca, ekstra küçük cihazlar için 480 piksel referansı bir yazım hatası mı? 767 piksele kadar demesi gerekmiyor mu? (belgelerden kaldırıldığından beri)

Dave Powers
Edited question 2019ösp19ös21 Temmuz 2019 в 9:19
Programlama
twitter-bootstrap-3 twitter-bootstrap breakpoints media-queries
2013ösp46ös14 Ekim 2013 в 2:46
28 görünümler

Bootstrap medya sorgularını çok iyi belgelemiyor. Bu @screen-sm, @screen-md, @screen-lg değişkenleri aslında basit CSS'ye değil LESS değişkenlerine atıfta bulunur.

Bootstrap'i özelleştirdiğinizde medya sorgusu kesme noktalarını değiştirebilirsiniz ve derlendiğinde @screen-xx değişkenleri screen-xx olarak tanımladığınız piksel genişliğine değiştirilir. Bunun gibi bir çerçeve bu şekilde bir kez kodlanabilir ve daha sonra son kullanıcı tarafından kendi ihtiyaçlarına uyacak şekilde özelleştirilebilir.

Burada daha fazla netlik sağlayabilecek benzer bir soru: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries

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

İkinci sorunuzla ilgili olarak, bu bir yazım hatası değildir. Ekran 768 pikselin altına indiğinde çerçeve tamamen akışkan hale gelir ve herhangi bir cihaz genişliğinde yeniden boyutlandırılarak kesme noktalarına olan ihtiyacı ortadan kaldırır. 480 pikseldeki kesme noktası, mobil optimizasyon için düzende meydana gelen belirli değişiklikler nedeniyle mevcuttur.

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

Community
Edited answer 2017ööp31öö10 Mayıs 2017 в 10:31
Yorumlar (2)

Bu konu https://github.com/twbs/bootstrap/issues/10203 adresinde tartışılmıştır. Şimdiye kadar, uyumluluk nedeniyle Grid'i değiştirme planı yoktur.

Bootstrap'i bu çataldan, hs dalından edinebilirsiniz: https://github.com/antespi/bootstrap/tree/hs

Bu dal size 480 pikselde ekstra bir kesme noktası verir, bu yüzden yapmanız gerekir:

  1. Önce mobil için tasarlayın (XS, 480 pikselden küçük)
  2. HTML'nize HS (Yatay Küçük Cihazlar) sınıfları ekleyin: col-hs-*, visible-hs, ... ve yatay mobil cihazlar için tasarım yapın (HS, 768 pikselden küçük)
  3. Tablet cihazlar için tasarım (SM, 992 pikselden küçük)
  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)

Önce mobil tasarım, Bootstrap 3'ü anlamanın anahtarıdır. Bu, BootStrap 2.x'ten gelen en büyük değişikliktir. Kural şablonu olarak bunu takip edebilirsiniz (LESS'te):

.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) */
    }
}
Dave Powers
Edited answer 2019ööp52öö1 Temmuz 2019 в 1:52
Yorumlar (4)

480 piksel referansı kaldırılmıştır. Bunun yerine şöyle yazıyor:

/* 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ı yoktur.

Eğer @screen-sm-min ve diğer mixinleri kullanmak istiyorsanız, LESS ile derliyor olmanız gerekir, bkz. http://getbootstrap.com/css/#grid-less

İşte Bootstrap 3 ve LESS'in nasıl kullanılacağına dair bir eğitim: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Yorumlar (0)