W dokumentacji zapytań o media Bootstrap 3 jest napisane:

Używamy następujących zapytań o media w naszych plikach Less do tworzenia kluczowych punktów przerwania w naszym systemie grid.

Bardzo małe urządzenia (telefony, mniej niż 768px): brak zapytania o media, ponieważ jest to ustawienie domyślne w Bootstrap

Małe urządzenia (tablety, 768px i nowsze): @media (min-width: @screen-sm-min) { ... }

Średnie urządzenia (komputery stacjonarne, 992 piksele i nowsze): @media (min-width: @screen-md-min) { ... }

Duże urządzenia (duże komputery stacjonarne, 1200 pikseli i więcej): @media (min-width: @screen-lg-min) { ... }

Czy mamy być w stanie wykorzystać @screen-sm, @screen-mdi @screen-lgnazwiska w naszych zapytań mediów, jak również? Ponieważ to nie działa na mnie. Muszę używać pomiarów pikseli, takich jak @media (min-width: 768px) {...}zanim to zadziała. czy robię coś źle?

Czy odniesienie do 480 pikseli dla bardzo małych urządzeń to błąd? Czy to nie powinno oznaczać do 767 pikseli? ( od czasu usunięcia z dokumentacji )

Zapytania o media Bootstrap 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) { ... }

Bootstrap 4 zapewnia źródłowy CSS w Sassie, który można dołączyć za pomocą miksów Sass:

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

Zapytania o media Bootstrap 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) {

}

Zapytania o media Bootstrap 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) {

}

Źródło: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap nie dokumentuje dobrze zapytań o media. Te zmienne @screen-sm, @screen-md, @screen-lgsą faktycznie odnosząc się do mniej zmiennych i nie prosty CSS.

Kiedy dostosujesz Bootstrap, możesz zmienić punkty przerwania zapytania o media, a podczas kompilacji zmienne @ screen-xx są zmieniane na dowolną szerokość piksela zdefiniowaną jako screen-xx. W ten sposób taki framework może zostać raz zakodowany, a następnie dostosowany przez użytkownika końcowego do jego potrzeb.

Podobne pytanie tutaj, które może zapewnić większą jasność: Zapytania o nośniki Bootstrap 3.0

W swoim CSS nadal będziesz musiał używać tradycyjnych zapytań o media, aby przesłonić lub dodać do tego, co robi Bootstrap.

Jeśli chodzi o twoje drugie pytanie, to nie jest literówka. Gdy ekran spadnie poniżej 768 pikseli, struktura staje się całkowicie płynna i zmienia rozmiar przy dowolnej szerokości urządzenia, eliminując potrzebę stosowania punktów przerwania. Punkt przerwania w rozdzielczości 480 pikseli istnieje, ponieważ w układzie zachodzą określone zmiany w celu optymalizacji mobilnej.

Aby zobaczyć to w akcji, przejdź do tego przykładu w ich witrynie ( http://getbootstrap.com/examples/navbar-fixed-top/ ) i zmień rozmiar okna, aby zobaczyć, jak traktuje projekt po 768px.

Ten problem został omówiony na https://github.com/twbs/bootstrap/issues/10203 Do tej pory nie ma planu zmiany Grid ze względu na kompatybilność.

Możesz pobrać Bootstrap z tego widelca, gałęzi hs: https://github.com/antespi/bootstrap/tree/hs

Ta gałąź daje dodatkowy punkt przerwania przy 480 pikselach, więc musisz:

1. Projekt pod kątem urządzeń mobilnych (XS, mniej niż 480 pikseli)
2. Dodaj klasy HS (poziome małe urządzenia) w kodzie HTML: col-hs- *, visible-hs, ... i projekt dla poziomych urządzeń mobilnych (HS, mniej niż 768px)
3. Projekt dla tabletów (SM, mniej niż 992px)
4. Projekt dla urządzeń stacjonarnych (MD, mniej niż 1200 pikseli)
5. Projekt dla dużych urządzeń (LG, więcej niż 1200px)

Projekt mobilny jest kluczem do zrozumienia Bootstrap 3. Jest to główna zmiana w stosunku do BootStrap 2.x. Jako szablon reguły możesz postępować zgodnie z tym (w MNIEJ):

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

Wiem, że to jest trochę stare, ale pomyślałem, że będę w stanie wnieść swój wkład. Opierając się na odpowiedzi @Sophy, oto co zrobiłem, aby dodać punkt przerwania .xxs. Nie zadbałem o klasy visible-inline, table.visible itp.

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

}

Usunięto odniesienie do 480 pikseli. Zamiast tego mówi:

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

W Bootstrap 3 nie ma punktu przerwania poniżej 768 pikseli.

Jeśli chcesz używać tych @screen-sm-mini innych mixinów, musisz kompilować z LESS, zobacz http://getbootstrap.com/css/#grid-less

Oto samouczek dotyczący korzystania z Bootstrap 3 i LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Powinieneś być w stanie użyć tych punktów przerwania, jeśli używasz http://lesscss.org/ do budowania swojego CSS.

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

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

W rzeczywistości @screen-sm-minjest zmienną, która jest zastępowana przez wartość określoną w _variablepodczas budowania za pomocą Less. Jeśli nie używasz Less, możesz zastąpić tę zmienną wartością:

/* 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 oficjalnie obsługuje Sass: https://github.com/twbs/bootstrap-sass . Jeśli używasz Sassa (a powinieneś), składnia jest nieco inna.

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

Oto selektory używane w Bootstrap 4. W BS4 nie ma „najniższego” ustawienia, ponieważ „bardzo mały” jest ustawieniem domyślnym. Oznacza to, że najpierw zakodowałbyś rozmiar XS, a następnie miałbyś zastąpić te media.

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

kiedy używam @media (max-width: 768px), mój projekt psuje się na 768px. Ale jest dobrze na 767px, a także na 769px. Myślę więc, że maksymalna szerokość będzie wynosić 767 pikseli w przypadku kierowania na małe urządzenia.

dla bootstrap 3 Mam następujący kod w moim komponencie navbar

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

wtedy możesz użyć czegoś takiego jak

@media wide { selector: style }

Wykorzystuje to jakąkolwiek wartość, na jaką masz ustawione zmienne.

Escaping pozwala na użycie dowolnego ciągu jako właściwości lub wartości zmiennej. Cokolwiek wewnątrz ~ „cokolwiek” lub ~ „cokolwiek” jest używane bez zmian, z wyjątkiem interpolacji.

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



}