Я использую Bootstrap 3 для создания адаптивного макета, в котором я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой логики?
371
Я использую Bootstrap 3 для создания адаптивного макета, в котором я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой логики?
Ответы:
Bootstrap 3
Вот селекторы, используемые в BS3, если вы хотите оставаться последовательными:
Примечание: к вашему сведению, это может быть полезно для отладки:
Bootstrap 4
Вот селекторы, используемые в BS4. В BS4 нет «самого низкого» параметра, потому что «очень маленький» является значением по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители.
Обновление 2019-02-11: информация BS3 по-прежнему точна, начиная с версии 3.4.0, обновлена версия BS4 для новой сетки, точна по состоянию на 4.3.0.
источник
<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>
Основываясь на ответе bisio и коде Bootstrap 3, я смог найти более точный ответ для тех, кто просто хочет скопировать и вставить полный набор медиазапросов в их таблицу стилей:
источник
min-width
, но выmax-width
также использовали , так в чем же разница?Если вы используете LESS или SCSS / SASS и используете версию Bootstrap для LESS / SCSS, вы также можете использовать переменные , если у вас есть к ним доступ. Меньший перевод ответа @ full-достойный будет следующим:
Существуют также переменные для
@screen-sm-max
и@screen-md-max
, которые на 1 пиксель меньше,@screen-md-min
и@screen-lg-min
, соответственно, обычно для использования с@media(max-width)
.EDIT: Если вы используете SCSS / SASS, переменные начинаются с
$
вместо@
, так что было бы и$screen-xs-max
т.д.источник
$screen-xs-max
и т. д. (и если вы используете LESS / SCSS локально, но импортируете версию CSS Bootstrap, вам вообще не повезло.)@screen-tablet
,@screen-desktop
И@screen-lg-desktop
устарели. Может быть, пришло время обновить ваш уже удивительный ответ. ;-)Это значения из Bootstrap3:
источник
and
условия. @JasonMiller, так что это не обязательно, это зависит от спецификаций и требований шаблона.Вот два примера.
Как только область просмотра станет шириной 700px или меньше, сделайте все теги h1 20px.
Делайте все h1's 20px, пока область просмотра не достигнет 700px или больше.
Надеюсь, это поможет: 0)
источник
font-size: 20px
дляh1
тегов в обоих случаях. Для лучшего понимания вы можете использовать другое,font-size
как указано в вопросе. Кстати это все в порядке.Вот более модульный пример использования LESS для имитации Bootstrap без импорта меньшего количества файлов.
источник
Основываясь на ответах других пользователей, я написал эти собственные миксины для более легкого использования:
Меньше ввода
Пример использования
Вход SCSS
Пример использования:
Вывод
источник
Начиная с Bootstrap v3.3.6 используются следующие медиазапросы, соответствующие документации, в которой указаны доступные классы реагирования ( http://getbootstrap.com/css/#responsive-utilities ).
Медиа-запросы, извлеченные из репозитория Bootstrap GitHub из следующих меньших файлов: -
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
источник
Или простой Sass-Compass:
Пример:
источник
имейте в виду, что избегание масштабирования текста является основной причиной существования адаптивных макетов. Вся логика адаптивных сайтов заключается в создании функциональных макетов, которые эффективно отображают ваш контент, чтобы его можно было легко прочитать и использовать на экранах разных размеров.
Хотя в некоторых случаях необходимо масштабировать текст, будьте осторожны, чтобы не миниатюризировать свой сайт и не упустить смысл.
вот пример в любом случае.
Также имейте в виду, что окно 480 просмотра было отброшено в начальной загрузке 3.
источник
Мы используем следующие медиазапросы в наших файлах Less, чтобы создать ключевые точки останова в нашей системе координат.
смотрите также на Bootstrap
источник
источник
Вот еще одно универсальное решение, включающее отдельные реагирующие файлы на основе медиа-запросов.
Это позволяет использовать всю логику медиа-запроса и включать логику только на одной странице - загрузчике. Это также позволяет избежать того, что медиа-запросы сами загромождают отзывчивые таблицы стилей.
base.less будет выглядеть так
sm-min.less будет выглядеть так
ваш индекс просто должен загрузить loader.less
очень просто..
источник
Bootstrap в основном использует следующие диапазоны медиа-запросов - или точки останова - в наших исходных файлах Sass для нашей компоновки, системы сетки и компонентов.
Очень маленькие устройства (портретные телефоны, менее 576 пикселей) Нет медиазапроса,
xs
так как это по умолчанию в BootstrapМаленькие устройства (ландшафтные телефоны, 576px и выше)
Средние устройства (планшеты, 768 пикселей и выше)
Большие устройства (рабочие столы, 992px и выше)
Очень большие устройства (большие рабочие столы, 1200px и выше)
Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через Sass mixins:
Для точки останова xs не требуется медиазапрос, так как это эффективно
@media (min-width: 0) { ... }
Для глубокого понимания, пожалуйста, пройдите по ссылке ниже
https://getbootstrap.com/docs/4.3/layout/overview/
источник
источник
Используйте медиа-запросы для IE;
источник
:)
В последней загрузке (4.3.1), используя SCSS (SASS), вы можете использовать один из @mixin из
/bootstrap/scss/mixins/_breakpoints.scss
Носитель с минимальной шириной точки останова. Нет запроса для наименьшей точки останова. Делает @content применимым к данной точке останова и шире.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
Среда максимальной ширины точки останова. Нет запроса на самую большую точку останова. Делает @content применимым к заданной точке останова и уже.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
Носитель, который охватывает несколько точек останова. Заставляет @content применяться между минимальной и максимальной точками останова
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
Носитель между минимальной и максимальной шириной точки останова. Нет минимума для самой маленькой точки останова и нет максимума для самой большой. Заставляет @content применяться только к заданной точке останова, а не к областям просмотра шире или уже.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
Например:
Документация:
Удачного кодирования;)
источник
Чтобы улучшить основной ответ:
Вы можете использовать медиа- атрибут
<link>
тега (он поддерживает медиа-запросы), чтобы загрузить только тот код, который нужен пользователю.При этом браузер загрузит все CSS-ресурсы независимо от атрибута media . Разница в том, что если media-запрос атрибута media оценивается как false, то этот файл .css и его содержимое не будут блокировать рендеринг.
Поэтому рекомендуется использовать атрибут media в
<link>
теге, поскольку он гарантирует лучшее взаимодействие с пользователем.Здесь вы можете прочитать статью Google об этой проблеме https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.
Некоторые инструменты, которые помогут вам автоматизировать разделение кода CSS на разные файлы в соответствии с вашими медиа-запросами.
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query
источник