Pada dokumentasi permintaan media Bootstrap 3 dikatakan:

Kami menggunakan kueri media berikut dalam file Less kami untuk membuat breakpoint kunci dalam sistem grid kami.

Perangkat ekstra kecil (ponsel, kurang dari 768px): Tidak ada permintaan media karena ini adalah default di Bootstrap

Perangkat kecil (tablet, 768px ke atas): @media (min-width: @screen-sm-min) { ... }

Perangkat menengah (desktop, 992px dan lebih tinggi): @media (min-width: @screen-md-min) { ... }

Perangkat besar (desktop besar, 1200px dan lebih tinggi): @media (min-width: @screen-lg-min) { ... }

Kita seharusnya dapat menggunakan @screen-sm, @screen-mddan @screen-lgnama-nama dalam permintaan media kita juga? Karena itu tidak berhasil untuk saya. Saya harus menggunakan pengukuran piksel seperti @media (min-width: 768px) {...}sebelum akan bekerja. Apakah saya melakukan sesuatu yang salah?

Juga, apakah referensi ke 480px untuk perangkat ekstra kecil itu salah ketik? Bukankah seharusnya itu mengatakan hingga 767px? ( sejak dihapus dari dokumentasi )

Bootstrap 4 Pertanyaan Media

// 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 menyediakan sumber CSS di Sass yang dapat Anda sertakan melalui 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;
  }
}

Bootstrap 3 Kueri Media

/*==========  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 Kueri Media

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

}

Sumber daya dari: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap tidak mendokumentasikan pertanyaan media dengan sangat baik. Variabel dari @screen-sm, @screen-md, @screen-lgsebenarnya mengacu pada variabel KURANG dan CSS tidak sederhana.

Ketika Anda mengkustomisasi Bootstrap, Anda dapat mengubah breakpoint kueri media dan ketika mengkompilasi variabel @ screen-xx diubah menjadi berapa pun lebar piksel yang Anda tetapkan sebagai screen-xx. Ini adalah bagaimana kerangka kerja seperti ini dapat dikodekan sekali dan kemudian dikustomisasi oleh pengguna akhir agar sesuai dengan kebutuhan mereka.

Pertanyaan serupa di sini yang mungkin memberikan kejelasan lebih lanjut: Bootstrap 3.0 Media queries

Di CSS Anda, Anda masih harus menggunakan kueri media tradisional untuk mengganti atau menambah apa yang dilakukan Bootstrap.

Sehubungan dengan pertanyaan kedua Anda, itu bukan salah ketik. Setelah layar berjalan di bawah 768px, kerangka kerja menjadi sepenuhnya cair dan mengubah ukuran pada lebar perangkat apa pun, menghilangkan kebutuhan untuk breakpoints. Breakpoint di 480px ada karena ada perubahan spesifik yang terjadi pada tata letak untuk pengoptimalan seluler.

Untuk melihat ini dalam tindakan, buka contoh ini di situs mereka ( http://getbootstrap.com/examples/navbar-fixed-top/ ), dan ubah ukuran jendela Anda untuk melihat bagaimana ia memperlakukan desain setelah 768px.

Masalah ini telah dibahas di https://github.com/twbs/bootstrap/issues/10203 Sekarang, tidak ada rencana untuk mengubah Grid karena alasan kompatibilitas.

Anda bisa mendapatkan Bootstrap dari cabang ini, cabang hs: https://github.com/antespi/bootstrap/tree/hs

Cabang ini memberi Anda breakpoint ekstra pada 480px, jadi Anda harus:

1. Desain untuk seluler terlebih dahulu (XS, kurang dari 480px)
2. Tambahkan kelas HS (Perangkat Kecil Horisontal) dalam HTML Anda: col-hs- *, visible-hs, ... dan desain untuk perangkat seluler horizontal (HS, kurang dari 768px)
3. Desain untuk perangkat tablet (SM, kurang dari 992px)
4. Desain untuk perangkat desktop (MD, kurang dari 1200px)
5. Desain untuk perangkat besar (LG, lebih dari 1200px)

Desain ponsel pertama adalah kunci untuk memahami Bootstrap 3. Ini adalah perubahan besar dari BootStrap 2.x. Sebagai templat aturan, Anda dapat mengikuti ini (KURANG):

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

Saya tahu ini agak lama, tetapi saya pikir saya akan berkontribusi. Mendasarkan diri pada jawaban oleh @Sophy, inilah yang saya lakukan untuk menambahkan breakpoint .xxs. Saya belum mengurus kelas tampak-inline, table.visible, dll.

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

}

Referensi ke 480px telah dihapus. Sebaliknya ia mengatakan:

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

Tidak ada breakpoint di bawah 768px di Bootstrap 3.

Jika Anda ingin menggunakan @screen-sm-mindan mixin lainnya maka Anda harus mengkompilasi dengan KURANG, lihat http://getbootstrap.com/css/#grid-less

Berikut tutorial tentang cara menggunakan Bootstrap 3 dan KURANG: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Anda harus dapat menggunakan breakpoints itu jika Anda menggunakan http://lesscss.org/ untuk membangun CSS Anda.

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

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

Faktanya @screen-sm-minadalah variabel daripada diganti dengan nilai yang ditentukan _variablesaat membangun dengan Less. Jika Anda tidak menggunakan Less, Anda dapat mengganti variabel ini dengan nilainya:

/* 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 secara resmi mendukung Sass: https://github.com/twbs/bootstrap-sass . Jika Anda menggunakan Sass (dan Anda harus) sintaksnya agak berbeda.

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

Berikut adalah pemilih yang digunakan dalam Bootstrap 4. Tidak ada pengaturan "terendah" di BS4 karena "ekstra kecil" adalah default. Yaitu Anda pertama-tama akan mengkode ukuran XS dan kemudian menimpa media ini setelahnya.

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

ketika saya menggunakan @ media (max-width: 768px) desain saya rusak pada 768px. Tapi tidak apa-apa pada 767px dan juga pada 769px. Jadi, saya pikir itu akan menjadi 767px sebagai max-width untuk menargetkan perangkat kecil.

untuk bootstrap 3 saya memiliki kode berikut di komponen navbar saya

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

maka Anda dapat menggunakan sesuatu seperti

@media wide { selector: style }

Ini menggunakan nilai apa pun yang Anda tetapkan untuk variabel.

Escaping memungkinkan Anda untuk menggunakan string arbitrer apa pun sebagai properti atau nilai variabel. Apa pun di dalam ~ "apa pun" atau ~ 'apa pun' digunakan sebagaimana adanya tanpa perubahan kecuali interpolasi.

http://lesscss.org

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



}