Twitter Bootstrap 3: як використовувати медіа-запити?


371

Я використовую Bootstrap 3 для створення чуйного макета, де я хочу відрегулювати кілька розмірів шрифту відповідно до розміру екрана. Як я можу використовувати медіа-запити для створення такої логіки?


7
google "медіа-запити", а потім перевірте, як вони встановили завантажувальний інструмент
koala_dev

Відповіді:


651

Завантаження 3

Ось селектори, які використовуються в BS3, якщо ви хочете залишатися послідовними:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Примітка: FYI, це може бути корисно для налагодження:

<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>

Завантаження 4

Ось селектори, що використовуються в BS4. У BS4 немає "найнижчого" налаштування, оскільки типовим є "надзвичайно малий". Тобто ви спочатку зашифрували б розмір XS, а потім змінили б цей носій.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Оновлення 2019-02-11: Інформація про BS3 досі точна з версії 3.4.0, оновлена ​​BS4 для нової сітки, точна на 4.3.0.


116
Просто FYI, це може бути корисно для налагодження:<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>
Вільям Ентрікен

14
+1 для замовлення запитів шляхом збільшення розмірів екрана, залишаючись узгодженими з методологією BS3 для мобільних пристроїв.
Джейк Бергер

5
А як щодо 480px (@ screen-xs)? Це з’явилося пізніше? Зрозумів з тут .
brejoc

1
Щоб відповідати BS3, використовуйте змінні розміри екрана за замовчуванням для кожного огляду. Дивіться: stackoverflow.com/a/24921600/2817112
Oriol

1
@brejoc BS3 + - "мобільний перший" - перегляд "XS" (мобільний) - це перегляд за замовчуванням у BS3 + ...
jave.web

252

На основі відповіді 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) {

}

Тут відповідь з високим рівнем голосування використовує лише min-widthви, але ви max-widthтакож використовували , тож в чому різниця?
shaijut

Як дізнається завантажувач, якщо телефон перебуває в портретному режимі?
SuperUberDuper

@SuperUberDuper це не так. Він просто стосується елементів відповідно до горизонтального розміру вікна, а не макета екрана.
Кріс Клоуер

Чи не повинно бути замовлення від НИЗКОГО-ВИСОКОГО?
В'язень ЗЕРО

134

Якщо ви використовуєте LESS або SCSS / SASS, а ви використовуєте LESS / SCSS версію Bootstrap, ви можете також використовувати змінні , якщо у вас є доступ до них. Менший переклад відповіді @ 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).

EDIT: Якщо ви використовуєте SCSS / SASS, змінні починаються з $замість @, так що було б і $screen-xs-maxт.д.


1
Коли я хочу редагувати дані на .grid.less, завжди перезаписується з основного стилю. Чи є якесь рішення або мені просто потрібен весь стиль, який я додав у медіа-запитах, щоб додати! Важливо?
edonbajrami

2
Я не в змозі змусити це працювати. Компілятор скаржиться, якщо я використовую що-небудь, крім жорсткого коду.
laertiades

7
@JesseGoodfellow у наведеному вище прикладі використовує менший синтаксис; якщо ви використовуєте SASS / SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/… , ви хочете $screen-xs-maxі т.д. з Bootstrap, вам зовсім не пощастило.)
carpeliam

2
@screen-tablet, @screen-desktopі @screen-lg-desktopбули застарілими. Можливо, час для оновлення вашої вже приголомшливої ​​відповіді. ;-)
Сліп Д. Томпсон

2
Припускаючи, що ви будуєте завантажувальний засіб; це слід позначити як відповідь
sidonaldson

44

Це значення з 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){}

4
Це правильна відповідь. Повинні бути умови "та"
Джейсон Міллер

Щоб дозволити великим екранам використовувати css з css середнього екрана, усуньте andумови. @JasonMiller, тому це не зовсім "обов'язково", це залежить від специфікацій та вимог шаблону.
Онімуша

29

Ось два приклади.

Коли вікно перегляду стане шириною 700 пікселів або менше, зробіть усі теги h1 20 пікселями.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Зробіть усі 20-х пікселів h1, поки вікно перегляду не досягне 700 пікселів або більше.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Сподіваюся, це допомагає: 0)


Ви використовуєте font-size: 20pxдля h1тегів в обох випадках. Для кращого розуміння ви можете скористатися різними font-sizeзапитаннями. До речі, це все добре.
fWd82

21

Ось більш модульний приклад використання 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) {

}

Спробував це. Працює чудово!
Томаш Гонсалес

21

Виходячи з відповідей інших користувачів, я написав ці власні суміші для більш легкого використання:

Менше введення

.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;
  }
}

20

Станом на 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


12

Або простий 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;
    }
}

Дякую. Я шукав щось, що наводить приклади bootstrap sass mixin (власний приклад bootstrap складний з усім вмістом). Це багато що пояснює! :)
CleverNode

11

майте на увазі, що уникнення масштабування тексту є основною причиною існування чуйних макетів. вся логіка, що реагує на чуйні сайти, полягає у створенні функціональних макетів, які ефективно відображають ваш вміст, щоб його легко читали та використовували у кількох розмірах екрана.

Хоча в деяких випадках потрібно масштабувати текст, будьте обережні, щоб не мініатюрувати свій сайт і не пропустити суть.

є приклад все одно.

@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}

}

Також пам’ятайте, що в області завантаження 3 було випущено 480 вікон перегляду.


6

Наступні медіа-запити ми використовуємо в наших файлах Менше, щоб створити ключові точки перерви в нашій системі сітки.

/* 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


5

ви бачите в моєму прикладі розміри шрифту та кольори фону змінюються відповідно до розміру екрана

<!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>


2

Ось ще простіше рішення для зупинки, що включає окремі файли, що реагують на основі медіа-запитів.

Це дозволяє всій логіці запитів медіа, включаючи логіку, щоб існувати лише на одній сторінці завантажувача. Це також дозволяє не запитувати медіа-запити самих таблиць стилів.

//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" />

Простенька..


Привіт, я намагаюся використовувати менше, ніж 2 дні у завантажувальному закладі, але все ще намагаюся. Ви допоможете мені, будь ласка, щодо меншої кількості використання на Windows. я читав багато порад та статей, але не знайшов належних рішень, я думаю, ти можеш мені допомогти. Заздалегідь
дякую

вам потрібно переконатися, що ви включаєте менше бібліотеку javascript, тоді ваша програма знатиме, що робити з цими файлами. як ви менше включаєте в свою заявку, залежить від вас. Я використовую бібліотеку, знайдену в Github, через Активік. вам цього не потрібно робити. ви можете просто включити файл javascript, а потім завантажити файл меншого розміру через стандартний метатег стилю css. Ви не турбуєтесь про компіляцію. ця інформація тут. lesscss.org/#client-side-usage .
блам

2

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 mixins:

Немає медіа-запиту, необхідного для точки розриву 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) { ... }

Щоб зрозуміти це глибоко, будь ласка, перейдіть за посиланням нижче

https://getbootstrap.com/docs/4.3/layout/overview/


1

Екран лише @media і (максимальна ширина: 1200 пікселів) {}

Екран лише @media і (максимальна ширина: 979 пікселів) {}

Екран лише @media і (максимальна ширина: 767 пікселів) {}

Екран лише @media та (максимальна ширина: 480 пікселів) {}

Екран лише @media та (максимальна ширина: 320 пікселів) {}

@media (мінімальна ширина: 768px) та (max-width: 991px) {}

@media (мінімальна ширина: 992px) та (max-width: 1024px) {}


0

Використовувати медіа-запити для 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) {
}

0

:)

В останній завантажувальній програмі (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;
  }
}

Документація:

Щасливе кодування;)


-1

Щоб покращити основну відповідь:

Ви можете використовувати медіа- атрибут <link>тегу (він підтримує медіа-запити), щоб завантажити лише той код, який потрібен користувачеві.

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

З цим браузер завантажить усі ресурси CSS, незалежно від атрибута медіа . Різниця полягає в тому, що якщо медіа-запит медіа-атрибута оцінюється як помилковий, то цей файл .css і його вміст не буде блокуватися візуалізацією.

Тому рекомендується використовувати атрибут media в <link>тезі, оскільки це гарантує кращу роботу користувачів.

Тут ви можете прочитати статтю Google про цю проблему https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Деякі інструменти, які допоможуть вам автоматизувати розділення коду css у різних файлах відповідно до ваших медіа-запитів

Вебпак 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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.