Korzystam z Bootstrap 3, aby zbudować responsywny układ, w którym chcę dopasować kilka rozmiarów czcionek do rozmiaru ekranu. Jak mogę użyć zapytań o media, aby stworzyć taką logikę?

Bootstrap 3

Oto selektory używane w BS3, jeśli chcesz zachować spójność:

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

Uwaga: FYI, może to być przydatne do debugowania:

<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

Oto selektory używane w BS4. W BS4 nie ma „najniższego” ustawienia, ponieważ „bardzo mały” jest domyślny. Oznacza to, że najpierw zakodujesz rozmiar XS, a następnie zastąpisz te media.

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

Aktualizacja 2019-02-11: Informacje BS3 są nadal dokładne od wersji 3.4.0, zaktualizowane BS4 dla nowej siatki, dokładne od 4.3.0.

Na podstawie odpowiedzi bisio i kodu Bootstrap 3 udało mi się znaleźć dokładniejszą odpowiedź dla każdego, kto chce tylko skopiować i wkleić kompletny zestaw zapytań o media w swoim arkuszu stylów:

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

}

Jeśli używasz LESS lub SCSS / SASS i używasz wersji Bootstrap w wersji LESS / SCSS, możesz również używać zmiennych , pod warunkiem, że masz do nich dostęp. MNIEJ tłumaczenie odpowiedzi @ full-decent brzmiałoby następująco:

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

Istnieją również zmienne dla @screen-sm-maxi @screen-md-max, które są o 1 piksel mniejsze niż @screen-md-mini @screen-lg-min, zwykle, do użycia z @media(max-width).

EDYCJA: Jeśli używasz SCSS / SASS, zmienne zaczynają się $od zamiast zamiast @, więc byłoby $screen-xs-maxitd.

Oto wartości z 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){}

Oto dwa przykłady.

Gdy rzutnia osiągnie szerokość 700 pikseli lub mniej, ustaw wszystkie tagi h1 na 20 pikseli.

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

Zrób wszystkie h1 na 20px, dopóki rzutnia nie osiągnie 700px lub więcej.

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

Mam nadzieję, że to pomaga: 0)

Oto bardziej modułowy przykład użycia LESS do naśladowania Bootstrap bez importowania mniejszej liczby plików.

@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) {

}

Na podstawie odpowiedzi innych użytkowników napisałem te niestandardowe miksy, aby ułatwić ich użycie:

Mniej nakładów

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

Przykładowe użycie

body {
  .when-lg({
    background-color: red;
  });
}

Wejście 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; } }

Przykładowe użycie:

body {
  @include when-md {
    background-color: red;
  }
}

Wynik

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}

Począwszy od wersji Bootstrap 3.3.6 stosowane są następujące zapytania dotyczące multimediów, które odpowiadają dokumentacji opisującej dostępne klasy responsywne ( 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) {}

Zapytania o media wyodrębnione z repozytorium Bootstrap GitHub z następujących mniej plików: -

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

Lub prosty 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;
    }
}

Przykład:

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

pamiętaj, że głównym powodem istnienia układów responsywnych jest unikanie skalowania tekstu. cała logika responsywnych stron polega na tworzeniu funkcjonalnych układów, które skutecznie wyświetlają zawartość, dzięki czemu jest czytelna i można ją stosować na wielu rozmiarach ekranu.

Mimo że w niektórych przypadkach konieczne jest skalowanie tekstu, należy uważać, aby nie zminiaturyzować witryny i nie przegapić tego.

oto i tak przykład.

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

}

Pamiętaj również, że rzutnia 480 została upuszczona w bootstrap 3.

Używamy następujących zapytań o media w naszych plikach Less, aby utworzyć kluczowe punkty przerwania w naszym systemie grid.

/* 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) { ... }

patrz także na Bootstrap

widać w moim przykładzie rozmiary czcionek i kolory tła zmieniają się w zależności od rozmiaru ekranu

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

Oto jeszcze łatwiejsze rozwiązanie typu One Stop, w tym osobne pliki responsywne oparte na zapytaniach o media.

Dzięki temu cała logika zapytań o media i logika uwzględnienia muszą istnieć tylko na jednej stronie - module ładującym. Pozwala to również uniknąć sytuacji, w której zapytania o media zaśmiecają same responsywne arkusze stylów.

//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 wyglądałby tak

/**
* 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 wyglądałby tak

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

Twój indeks musiałby tylko załadować loader.less

<link rel="stylesheet/less" type="text/css" href="loader.less" />

bułka z masłem..

Bootstrap używa przede wszystkim następujących zakresów zapytań o media - lub punktów przerwania - w naszych źródłowych plikach Sass dla naszego układu, systemu siatki i komponentów.

Bardzo małe urządzenia (telefony portretowe, mniej niż 576 pikseli) Brak zapytania o media, xsponieważ jest to ustawienie domyślne w Bootstrap

Małe urządzenia (telefony w orientacji poziomej, 576 pikseli i więcej)

@media (min-width: 576px) { ... }

Średnie urządzenia (tablety, 768 pikseli i więcej)

@media (min-width: 768px) { ... }

Duże urządzenia (komputery stacjonarne, 992px i nowsze)

@media (min-width: 992px) { ... }

Bardzo duże urządzenia (duże komputery stacjonarne, 1200 pikseli i więcej)

@media (min-width: 1200px) { ... }

Ponieważ piszemy nasz źródłowy CSS w Sass, wszystkie nasze zapytania o media są dostępne poprzez mixiny Sass:

Żadne zapytanie o media nie jest konieczne dla punktu przerwania xs, ponieważ jest on efektywny @media (min-width: 0) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Aby to zrozumieć, proszę przejść przez poniższy link

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

@ ekran tylko dla mediów i (maksymalna szerokość: 1200 pikseli) {}

@ ekran tylko dla mediów i (maks. szerokość: 979 pikseli) {}

@ ekran tylko dla mediów i (maksymalna szerokość: 767 pikseli) {}

@ ekran tylko dla mediów i (maks. szerokość: 480 pikseli) {}

@ ekran tylko dla mediów i (maksymalna szerokość: 320 pikseli) {}

@media (min-width: 768px) i (max-width: 991px) {}

@media (min-width: 992px) i (max-width: 1024px) {}

Użyj zapytań o media dla 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) {
}

:)

W najnowszym bootstrapie (4.3.1) za pomocą SCSS (SASS) możesz użyć jednego z @mixin z /bootstrap/scss/mixins/_breakpoints.scss

Media o minimalnej szerokości punktu przerwania. Brak zapytania o najmniejszy punkt przerwania. Sprawia, że ​​@content ma zastosowanie do danego punktu przerwania i jest szerszy.

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

Media o maksymalnej szerokości punktu przerwania. Brak zapytania o największy punkt przerwania. Sprawia, że ​​@content ma zastosowanie do danego punktu przerwania i jest węższy.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

Nośnik obejmujący wiele szerokości punktów przerwania. Sprawia, że ​​@content ma zastosowanie między minimalnymi i maksymalnymi punktami przerwania

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

Media między minimalną a maksymalną szerokością punktu przerwania. Brak minimum dla najmniejszego punktu przerwania i brak maksimum dla największego. Sprawia, że ​​@content ma zastosowanie tylko do danego punktu przerwania, a nie do rzutni szerszych ani węższych.

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

Na przykład:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

Dokumentacja:

• intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• migracja https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• zmienne https://getbootstrap.com/docs/4.3/layout/grid/#variables

Szczęśliwego kodowania;)

Aby poprawić główną odpowiedź:

Możesz użyć atrybutu media<link> tagu (obsługuje zapytania o media), aby pobrać tylko kod, którego potrzebuje użytkownik.

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

Dzięki temu przeglądarka pobierze wszystkie zasoby CSS, niezależnie od atrybutu media . Różnica polega na tym, że jeśli zapytanie medialne atrybutu media zostanie ocenione na false, to plik .css i jego zawartość nie będą blokowały renderowania.

Dlatego zaleca się użycie atrybutu media w pliku<link> tagu, ponieważ gwarantuje to lepszą obsługę.

Tutaj możesz przeczytać artykuł Google na ten temat https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Niektóre narzędzia, które pomogą zautomatyzować separację kodu css w różnych plikach zgodnie z zapytaniami o media

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