Punkty przerwania Bootstrap 3 i zapytania o media

170

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 )

Kris Hunt
źródło
Oto selektory używane w BS4. 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ś te nadpisania mediów. @media (min-width: 576px) {} @media (min-width: 768px) {} @media (min-width: 992px) {} @media (min-width: 1200px) {}
Babbandeep Singh

Odpowiedzi:

204

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

Sophy
źródło
8
@ CyrilDuchon-Doris, pytanie dotyczyło Bootstrap 3 ... więc nie sądzę.
Bagata
12
Odpowiedź została nagrodzona 30 punktami i wymienia Bootstrap 2. Wiele osób przyjrzy się jej, nawet jeśli nie będzie używać Bootstrap 3. Zawsze jestem bardzo wdzięczny osobom, które edytują własne odpowiedzi z aktualnymi informacjami, nawet jeśli są nieco nieaktualne początkowego zakresu.
Cyril Duchon-Doris
więc czy bardzo małe jest coś poniżej 479?
SuperUberDuper
2
Bootstrap v4 nie jest jeszcze stabilny. Czy jesteś tego świadomy? Odpowiedź może wymagać wielokrotnej aktualizacji, zanim osiągnie stabilną wersję.
Gherman
Uważam, że jest tutaj błąd jednego piksela, który może faktycznie mieć wpływ. W przypadku ekranów o rozdzielczości 1200 i 320 pikseli obowiązuje zarówno zapytanie o maks. Media, jak i o min. O media. Maksymalna liczba zapytań o media powinna wynosić minus 1 piksel (na przykład 1199 piks.). Zapytania o media o min. I maks. 320px nie mają dla mnie sensu, ponieważ ekrany AFAIK praktycznie zaczynają się od 320px.
Ben Carp
39

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.

Lance Turri
źródło
6
Aby zobaczyć to w akcji, przejdź do tego przykładu w ich witrynie i zmień rozmiar okna, aby zobaczyć, jak traktuje projekt po 768px. // Co to ma wspólnego z 480 pikselami? Nie widzę niczego innego, co dzieje się przy 480 pikselach w porównaniu z powiedzmy 500 pikselami.
Kris Hunt
O ile naturalnie rozwija się w zmiennym systemie Bootstrap 3, powinno to być akceptowaną odpowiedzią, ponieważ jest to bardzo wydajne podejście.
klewis
28

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) */
    }
}
Antonio Espinosa
źródło
1
Przepraszam, nie rozumiem wartości dodanej tego widelca. Tak jak rozumiem @screen-hs-min:@screen-xs;. Dlaczego nie użyć @screen-xsbezpośrednio tutaj?
Bass Jobsen
Tylko dla lepszego zrozumienia. Ta zmienna nadaje szablonowi wizualną spójność. Bootstrap 3 to Mobile First, więc wszystkie reguły poza zapytaniami o media dotyczą rozmiaru urządzeń mobilnych. Następnie, jeśli potrzebujesz dodatkowej reguły dla RO, zapiszesz min-width: @screen-hs-min, jeśli potrzebujesz reguły estra dla SM, zapiszesz w niej min-width: @screen-sm-mini tak dalej. Ten rozwidlenie służy do dodawania nowego punktu przerwania w rozdzielczości 480 pikseli. Wtedy rozmiar telefonu komórkowego jest poniżej 480 pikseli, a nowy rozmiar (HS) pojawia się między 480 pikseli a 768 pikseli
Antonio Espinosa
Zauważ, że szablon zawiera małą literówkę. screen-hs-min powinno być screen-xs-min
eflat
@eflat to nie jest błąd literowy, screen-hs-minto nowa reguła między screen-xs-minascreen-sm-min
Antonio Espinosa.
7

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

}
Enrico
źródło
1
Dokładnie to, czego potrzebowałem, dzięki! Więc nie muszę tego robić od nowa :)
antoni
Nie zapomnij też o zajęciach za .visible-xs-inline, .visible-xs-inline-blockkażdym razem, gdy je zastąpisz .visible-xs!
antoni
6

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

Anthony
źródło
2

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) {  }
gagaryna
źródło
1

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){}
Babbandeep Singh
źródło
0

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.

Xuwel Khan
źródło
0

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

Daniel
źródło
-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) {



}
Duński KT
źródło