Twitter Bootstrap 3: как использовать медиа-запросы?
Я использую Bootstrap 3 для создания адаптивного макета, в котором я хочу настроить несколько размеров шрифта в соответствии с размером экрана. Как я могу использовать медиа-запросы для создания такой логики?
15 ответов
Bootstrap 3
Вот селекторы, используемые в BS3, если вы хотите оставаться последовательными:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Примечание: к вашему сведению, это может быть полезно для отладки:
<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>
Bootstrap 4
Вот селекторы, используемые в BS4. В BS4 нет "самого низкого" параметра, потому что "очень маленький" является значением по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Обновление 2018-05-03: информация BS3 по-прежнему точна, начиная с версии 3.3.7, обновленная версия BS4 для новой сетки выпущена в 4.1.1.
Основываясь на ответе bisio и коде Bootstrap 3, я смог найти более точный ответ для любого, кто просто хочет скопировать и вставить полный набор медиазапросов в их таблицу стилей:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
Если вы используете LESS или SCSS/SASS и используете версию Bootstrap для LESS/SCSS, вы также можете использовать переменные, если у вас есть к ним доступ. Меньший перевод ответа @full-достойный будет выглядеть следующим образом:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */
Есть также переменные для @screen-sm-max а также @screen-md-max, что на 1 пиксель меньше @screen-md-min а также @screen-lg-minсоответственно обычно для использования с @media(max-width),
РЕДАКТИРОВАТЬ: Если вы используете SCSS/SASS, переменные начинаются с $ вместо @так было бы $screen-xs-max и т.п.
Это значения из Bootstrap3:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}
Вот два примера.
Как только область просмотра станет шириной 700px или меньше, сделайте все теги h1 20px.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Делайте все h1's 20px, пока область просмотра не достигнет 700px или больше.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Надеюсь, это поможет:0)
Начиная с Bootstrap v3.3.6 используются следующие медиазапросы, соответствующие документации, в которой описаны доступные классы реагирования ( http://getbootstrap.com/css/).
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}
Медиа-запросы, извлеченные из репозитория 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
Основываясь на ответах других пользователей, я написал эти пользовательские миксины для более легкого использования:
Меньше ввода
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }
Пример использования
body {
.when-lg({
background-color: red;
});
}
SCSS вход
@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }
Пример использования:
body {
@include when-md {
background-color: red;
}
}
Выход
@media (min-width:1200px) {
body {
background-color: red;
}
}
Вот более модульный пример использования LESS для имитации Bootstrap без импорта меньшего количества файлов.
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}
Или простой Sass-Compass:
@mixin col-xs() {
@media (max-width: 767px) {
@content;
}
}
@mixin col-sm() {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
@mixin col-md() {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
@mixin col-lg() {
@media (min-width: 1200px) {
@content;
}
}
Пример:
#content-box {
@include border-radius(18px);
@include adjust-font-size-to(18pt);
padding:20px;
border:1px solid red;
@include col-xs() {
width: 200px;
float: none;
}
}
Имейте в виду, что избегание масштабирования текста является основной причиной существования адаптивных макетов. Вся логика адаптивных сайтов заключается в создании функциональных макетов, которые эффективно отображают ваш контент, чтобы его можно было легко прочитать и использовать на экранах разных размеров.
Хотя в некоторых случаях необходимо масштабировать текст, будьте осторожны, чтобы не миниатюризировать свой сайт и не упустить смысл.
вот пример в любом случае.
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}
Также имейте в виду, что окно 480 просмотра было отброшено в начальной загрузке 3.
Мы используем следующие медиазапросы в наших файлах Less, чтобы создать ключевые точки останова в нашей системе координат.
/* 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) { ... }
смотрите также на Bootstrap
вы можете видеть в моем примере размеры шрифта и цвета фона меняются в зависимости от размера экрана
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Custom, iPhone Retina */
@media(max-width:320px){
body {
background-color: lime;
font-size:14px;
}
}
@media only screen and (min-width : 320px) {
body {
background-color: red;
font-size:18px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body {
background-color: aqua;
font-size:24px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
background-color: green;
font-size:30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
background-color: grey;
font-size:34px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
background-color: black;
font-size:42px;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>Bootstrap в основном использует следующие диапазоны медиа-запросов - или точки останова - в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.
Очень маленькие устройства (портретные телефоны, менее 576 пикселей) Нет медиа-запроса для xs поскольку это значение по умолчанию в Bootstrap
Небольшие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) { ... }
Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) { ... }
Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) { ... }
Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) { ... }
Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:
Для точки останова xs не требуется медиа-запрос, поскольку он эффективно @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
Чтобы понять это глубоко, перейдите по ссылке ниже
Вот еще одно простое решение, включающее отдельные реагирующие файлы на основе медиа-запросов.
Это позволяет использовать всю логику медиа-запроса и включать логику только на одной странице - загрузчике. Это также позволяет избежать того, что медиа-запросы сами загромождают отзывчивые таблицы стилей.
//loader.less
// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';
/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here. When you need a larger screen override, move those
* overrides to one of the responsive files below
*/
@import 'base.less';
/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)
base.less будет выглядеть так
/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
background-color: @fadedblue;
}
sm-min.less будет выглядеть так
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}
ваш индекс просто должен загрузить loader.less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
очень просто..
@media только экран и (максимальная ширина: 1200 пикселей) {}
@media только экран и (максимальная ширина: 979 пикселей) {}
@media только экран и (максимальная ширина: 767 пикселей) {}
@media только экран и (max-width: 480px) {}
@media только экран и (максимальная ширина: 320 пикселей) {}
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991 пикселей) {}
@media (min-width: 992px) и (max-width: 1024px) {}
:)
В последней версии начальной загрузки (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)
Например:
.content__extra {
height: 100%;
img {
margin-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
margin-bottom: 1rem;
}
}
Документация:
- введение https://getbootstrap.com/docs/4.3/layout/overview/
- миграция https://getbootstrap.com/docs/4.3/migration/
- переменные https://getbootstrap.com/docs/4.3/layout/grid/
Удачного кодирования;)
Используйте медиа-запросы для IE;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
Чтобы улучшить основной ответ:
Вы можете использовать медиа- атрибут <link> тег (он поддерживает медиа-запросы), чтобы загрузить только код, который нужен пользователю.
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
При этом браузер загрузит все 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