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-md
i @screen-lg
nazwiska 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 )
Odpowiedzi:
Zapytania o media Bootstrap 4
Bootstrap 4 zapewnia źródłowy CSS w Sassie, który można dołączyć za pomocą miksów Sass:
Zapytania o media Bootstrap 3
Zapytania o media Bootstrap 2.3.2
Źródło: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
źródło
Bootstrap nie dokumentuje dobrze zapytań o media. Te zmienne
@screen-sm
,@screen-md
,@screen-lg
są 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.
źródło
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/hsTa gałąź daje dodatkowy punkt przerwania przy 480 pikselach, więc musisz:
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):
źródło
@screen-hs-min:@screen-xs;
. Dlaczego nie użyć@screen-xs
bezpośrednio tutaj?min-width: @screen-hs-min
, jeśli potrzebujesz reguły estra dla SM, zapiszesz w niejmin-width: @screen-sm-min
i 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 pikseliscreen-hs-min
to nowa reguła międzyscreen-xs-min
ascreen-sm-min
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.
źródło
.visible-xs-inline, .visible-xs-inline-block
każdym razem, gdy je zastąpisz.visible-xs
!Usunięto odniesienie do 480 pikseli. Zamiast tego mówi:
W Bootstrap 3 nie ma punktu przerwania poniżej 768 pikseli.
Jeśli chcesz używać tych
@screen-sm-min
i innych mixinów, musisz kompilować z LESS, zobacz http://getbootstrap.com/css/#grid-lessOto samouczek dotyczący korzystania z Bootstrap 3 i LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
źródło
Powinieneś być w stanie użyć tych punktów przerwania, jeśli używasz http://lesscss.org/ do budowania swojego CSS.
Z https://getbootstrap.com/docs/3.4/css/#grid-media-queries
W rzeczywistości
@screen-sm-min
jest zmienną, która jest zastępowana przez wartość określoną w_variable
podczas budowania za pomocą Less. Jeśli nie używasz Less, możesz zastąpić tę zmienną wartością:Bootstrap 3 oficjalnie obsługuje Sass: https://github.com/twbs/bootstrap-sass . Jeśli używasz Sassa (a powinieneś), składnia jest nieco inna.
źródło
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.
źródło
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.
źródło
dla bootstrap 3 Mam następujący kod w moim komponencie navbar
wtedy możesz użyć czegoś takiego jak
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
źródło
źródło