Saya menggunakan Bootstrap 3 untuk membangun tata letak responsif di mana saya ingin menyesuaikan beberapa ukuran font sesuai dengan ukuran layar. Bagaimana saya bisa menggunakan kueri media untuk membuat logika semacam ini?

Bootstrap 3

Berikut adalah penyeleksi yang digunakan dalam BS3, jika Anda ingin tetap konsisten:

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

Catatan: FYI, ini mungkin berguna untuk debugging:

<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

Berikut adalah penyeleksi yang digunakan dalam BS4. Tidak ada pengaturan "terendah" di BS4 karena "ekstra kecil" adalah default. Yaitu Anda pertama-tama akan mengkode ukuran XS dan kemudian menimpa media ini setelahnya.

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

Pembaruan 2019-02-11: Info BS3 masih akurat pada versi 3.4.0, BS4 diperbarui untuk grid baru, akurat pada 4.3.0.

Berdasarkan jawaban bisio dan kode Bootstrap 3, saya dapat menemukan jawaban yang lebih akurat bagi siapa saja yang ingin menyalin dan menempelkan kueri media lengkap yang diatur ke dalam stylesheet mereka:

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

}

Jika Anda menggunakan KURANG atau SCSS / SASS dan Anda menggunakan Bootstrap versi KURANG / SCSS, Anda dapat menggunakan variabel juga, asalkan Anda memiliki akses ke sana. Terjemahan KURANG dari jawaban full-decent adalah sebagai berikut:

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

Ada juga variabel untuk @screen-sm-maxdan @screen-md-max, yang masing-masing kurang dari 1 piksel @screen-md-mindan @screen-lg-min, masing-masing, biasanya untuk digunakan bersama @media(max-width).

EDIT: Jika Anda menggunakan SCSS / SASS, variabel mulai dengan $bukan @, jadi itu akan menjadi $screen-xs-maxdll.

Ini adalah nilai-nilai dari 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){}

Berikut ini dua contoh.

Setelah viewport menjadi lebar 700px atau kurang, buat semua tag h1 20px.

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

Buat semua 20px h1 sampai viewport mencapai 700px atau lebih besar.

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

Semoga ini bisa membantu: 0)

Berikut adalah contoh yang lebih modular menggunakan KURANG untuk meniru Bootstrap tanpa mengimpor lebih sedikit file.

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

}

Berdasarkan jawaban pengguna lain, saya menulis mixin khusus ini untuk penggunaan yang lebih mudah:

Input lebih sedikit

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

Contoh penggunaan

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

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

Contoh penggunaan:

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

Keluaran

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

Pada Bootstrap v3.3.6 pertanyaan media berikut digunakan yang sesuai dengan dokumentasi yang menguraikan kelas responsif yang tersedia ( 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) {}

Kueri media yang diekstrak dari repositori Bootstrap GitHub dari lebih sedikit file berikut: -

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

Atau Kompas-Sass sederhana:

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

Contoh:

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

perlu diingat bahwa menghindari penskalaan teks adalah alasan utama tata letak responsif. seluruh logika di balik situs responsif adalah membuat tata letak fungsional yang secara efektif menampilkan konten Anda sehingga mudah dibaca dan dapat digunakan pada berbagai ukuran layar.

Meskipun perlu untuk skala teks dalam beberapa kasus, berhati-hatilah untuk tidak membuat miniatur situs Anda dan kehilangan intinya.

inilah contohnya.

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

}

Juga perlu diingat 480 viewport telah dijatuhkan di bootstrap 3.

Kami menggunakan kueri media berikut dalam file Less kami untuk membuat breakpoint kunci dalam sistem grid kami.

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

lihat juga di Bootstrap

Anda dapat melihat dalam contoh saya ukuran font dan warna latar belakang berubah sesuai dengan ukuran layar

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

Berikut ini adalah solusi satu atap yang lebih mudah, termasuk file responsif yang terpisah berdasarkan permintaan media.

Ini memungkinkan semua logika kueri media dan menyertakan logika hanya harus ada pada satu halaman, loader. Hal ini juga memungkinkan untuk tidak memiliki kueri media mengacaukan stylesheet responsif sendiri.

//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 akan terlihat seperti ini

/**
* 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 akan terlihat seperti ini

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

indeks Anda hanya perlu memuat loader.less

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

peasy mudah ..

Bootstrap terutama menggunakan rentang kueri media berikut — atau breakpoint — dalam file sumber Sass kami untuk tata letak, sistem kisi, dan komponen kami.

Perangkat ekstra kecil (ponsel potret, kurang dari 576px) Tidak ada permintaan media xskarena ini adalah default di Bootstrap

Perangkat kecil (ponsel landscape, 576px dan lebih tinggi)

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

Perangkat menengah (tablet, 768px dan lebih tinggi)

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

Perangkat besar (desktop, 992px dan lebih tinggi)

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

Perangkat ekstra besar (desktop besar, 1200px dan lebih tinggi)

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

Karena kami menulis CSS sumber kami di Sass, semua kueri media kami tersedia melalui Sass mixin:

Tidak ada permintaan media yang diperlukan untuk xs breakpoint karena efektif @media (min-width: 0) { ... }

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

Untuk memahaminya secara mendalam, silakan kunjungi tautan di bawah ini

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

Layar @media saja dan (max-width: 1200px) {}

Layar @media saja dan (max-width: 979px) {}

Layar @media saja dan (max-width: 767px) {}

Layar @media saja dan (lebar maksimal: 480px) {}

Layar @media saja dan (max-width: 320px) {}

@ media (lebar minimum: 768px) dan (lebar maksimum: 991px) {}

@ media (lebar minimum: 992px) dan (lebar maksimum: 1024px) {}

Gunakan kueri media untuk 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) {
}

:)

Dalam bootstrap terbaru (4.3.1), menggunakan SCSS (SASS) Anda dapat menggunakan salah satu dari @mixin dari /bootstrap/scss/mixins/_breakpoints.scss

Media setidaknya dengan lebar breakpoint minimum. Tidak ada permintaan untuk breakpoint terkecil. Membuat konten @ berlaku untuk breakpoint yang diberikan dan lebih luas.

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

Media paling banyak lebar breakpoint maksimum. Tidak ada permintaan untuk breakpoint terbesar. Membuat konten @ berlaku untuk breakpoint yang diberikan dan lebih sempit.

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

Media yang membentang beberapa lebar breakpoint. Membuat konten @ berlaku antara min dan max breakpoints

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

Media antara lebar minimum dan maksimum breakpoint. Tidak ada minimum untuk breakpoint terkecil, dan tidak maksimal untuk yang terbesar. Membuat konten @ hanya berlaku untuk breakpoint yang diberikan, bukan viewports yang lebih luas atau lebih sempit.

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

Sebagai contoh:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Dokumentasi:

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

Selamat coding;)

Untuk meningkatkan respons utama:

Anda dapat menggunakan atribut media dari <link>tag (mendukung permintaan media) untuk mengunduh kode yang dibutuhkan pengguna.

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

Dengan ini, browser akan mengunduh semua sumber daya CSS, terlepas dari atribut media . Perbedaannya adalah bahwa jika kueri media dari atribut media dievaluasi menjadi false, maka file .css dan kontennya tidak akan diblokir.

Oleh karena itu, disarankan untuk menggunakan atribut media dalam <link>tag karena itu menjamin pengalaman pengguna yang lebih baik.

Di sini Anda dapat membaca artikel Google tentang masalah ini https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Beberapa alat yang akan membantu Anda untuk mengotomatiskan pemisahan kode css Anda dalam file yang berbeda sesuai dengan pertanyaan media Anda

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