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-decent будет выглядеть следующим образом:
@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
etc.
Это значения из 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; } }
сделайте все 20px h1, пока видовой экран не достигнет 700px или больше.
@media screen and ( min-width: 700px ) { h1 { font-size: 20px; } }
надеюсь, это поможет :0)
вот более модульный пример использования 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) { }
начиная с Bootstrap v3. 3. 6 используются следующие запросы носителя, которые соответствуют документации, описывающей доступные адаптивные классы (http://getbootstrap.com/css/#responsive-utilities).
/* 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 input
@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; } }
или простой Sass-компас:
@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 окно просмотра было удалено в bootstrap 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>
вот еще более простое решение для одной остановки, включая отдельные адаптивные файлы на основе медиа-запросов.
Это позволяет всей логике запросов мультимедиа и включать логику только для того, чтобы существовать на одной странице, загрузчик. Это также позволяет не иметь медиа-запросы загромождают сами адаптивные таблицы стилей.
//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 * 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 * min-width: @screen-sm-min * Small devices (tablets, 768px and up) */ body{ background-color: @fadedgreen; }
ваш индекс будет просто придется грузить погрузчик.меньше
<link rel="stylesheet/less" type="text/css" href="loader.less" />
легкий peasy..
@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) {}
@media (min-width: 768px) и (max-width: 991px) {}
@media (min-width: 992px) и (max-width: 1024px) {}
использовать медиа-запросы для 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) { }