В документации по медиазапросам Bootstrap 3 написано:
Мы используем следующие медиа-запросы в наших файлах Less, чтобы создать ключевые точки останова в нашей сеточной системе.
Очень маленькие устройства (телефоны, менее 768 пикселей): нет медиазапроса, так как это по умолчанию в Bootstrap
Небольшие устройства (планшеты, 768 пикселей и выше):
@media (min-width: @screen-sm-min) { ... }
Средние устройства (настольные ПК, 992px и выше):
@media (min-width: @screen-md-min) { ... }
Большие устройства (большие рабочие столы, 1200px и выше):
@media (min-width: @screen-lg-min) { ... }
Должны ли мы быть в состоянии использовать @screen-sm
, @screen-md
и @screen-lg
имена нашего медиа - запросы, а? Потому что это не работает для меня. Я должен использовать измерения пикселей, например, @media (min-width: 768px) {...}
прежде чем он будет работать. Я делаю что-то неправильно?
Кроме того, является ли ссылка на 480px для очень маленьких устройств опечаткой? Разве это не должно говорить до 767 пикселей? ( так как удалено из документации )
Ответы:
Bootstrap 4 медиа-запросов
Bootstrap 4 предоставляет исходный CSS в Sass, который вы можете включить через Sass Mixins:
Bootstrap 3 Media Queries
Bootstrap 2.3.2 медиа-запросов
Ресурс от: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
источник
Bootstrap не очень хорошо документирует медиазапросы. Эти переменные
@screen-sm
,@screen-md
,@screen-lg
фактически обращаясь к LESS переменных , а не простой CSS.Когда вы настраиваете Bootstrap, вы можете изменять точки останова медиазапроса, а когда он компилируется, переменные @ screen-xx изменяются на любую ширину пикселя, которую вы определили как screen-xx. Вот как такая структура может быть закодирована один раз, а затем настроена конечным пользователем в соответствии с его потребностями.
Подобный вопрос здесь, который может дать больше ясности: Bootstrap 3.0 Медиа-запросы
В вашем CSS вам все равно придется использовать традиционные медиа-запросы для переопределения или добавления к тому, что делает Bootstrap.
Что касается вашего второго вопроса, это не опечатка. Как только экран становится ниже 768 пикселей, каркас становится полностью плавным и изменяет размеры при любой ширине устройства, устраняя необходимость в точках останова. Точка останова в 480px существует, потому что есть определенные изменения, которые происходят в макете для мобильной оптимизации.
Чтобы увидеть это в действии, перейдите к этому примеру на их сайте ( http://getbootstrap.com/examples/navbar-fixed-top/ ) и измените размер окна, чтобы увидеть, как оно обрабатывает дизайн после 768 пикселей.
источник
Эта проблема обсуждалась на https://github.com/twbs/bootstrap/issues/10203. В настоящее время не планируется менять Grid из-за соображений совместимости.
Вы можете получить Bootstrap из этой ветки, ветка
hs
: https://github.com/antespi/bootstrap/tree/hsЭта ветка дает вам дополнительную точку останова на 480px, так что вам нужно:
Дизайн мобильных устройств - это ключ к пониманию Bootstrap 3. Это основное отличие от BootStrap 2.x. Как шаблон правила вы можете следовать этому (в LESS):
источник
@screen-hs-min:@screen-xs;
. Почему бы не использовать@screen-xs
прямо здесь?min-width: @screen-hs-min
, если вам нужно правило estra для SM, вы запишите егоmin-width: @screen-sm-min
и так далее. Эта вилка используется для добавления новой точки останова на 480px. Тогда размер мобильного телефона будет меньше 480px, а новый размер (HS) появится между 480px и 768pxscreen-hs-min
это новое правило междуscreen-xs-min
иscreen-sm-min
Я знаю, что это немного стар, но я думал, что внесу свой вклад. Основываясь на ответе @Sophy, это то, что я сделал, чтобы добавить точку останова .xxs. Я не позаботился о классах visible-inline, table.visible и т. Д.
источник
.visible-xs-inline, .visible-xs-inline-block
каждый раз, когда вы переопределяете.visible-xs
!Ссылка на 480px была удалена. Вместо этого он говорит:
В Bootstrap 3 нет точки останова ниже 768 пикселей.
Если вы хотите использовать
@screen-sm-min
и другие миксины, то вам нужно компилировать с LESS, см. Http://getbootstrap.com/css/#grid-lessВот учебник о том, как использовать Bootstrap 3 и LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
источник
Вы должны иметь возможность использовать эти точки останова, если вы используете http://lesscss.org/ для создания своего CSS.
Из https://getbootstrap.com/docs/3.4/css/#grid-media-queries
Фактически
@screen-sm-min
это переменная, которая заменяется значением, указанным_variable
при построении с помощью Less. Если вы не используете Less, вы можете заменить эту переменную значением:Bootstrap 3 официально поддерживает Sass: https://github.com/twbs/bootstrap-sass . Если вы используете Sass (и вам следует), синтаксис немного отличается.
источник
Вот селекторы, используемые в Bootstrap 4. В BS4 нет «самого низкого» значения, потому что «очень маленький» является значением по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители.
источник
когда я использую @media (max-width: 768px), мой дизайн ломается на 768px. Но это нормально на 767px, а также на 769px. Итак, я думаю, что максимальная ширина будет 767 пикселей для таргетинга на небольшие устройства.
источник
для начальной загрузки 3 у меня есть следующий код в моем компоненте navbar
тогда вы можете использовать что-то вроде
При этом используется любое значение, для которого установлены переменные.
Экранирование позволяет использовать любую произвольную строку в качестве значения свойства или переменной. Все внутри ~ "что-нибудь" или ~ "что-нибудь" используется как есть, без изменений, кроме интерполяции.
http://lesscss.org
источник
источник