Ekran boyutuna göre birkaç yazı tipi boyutunu ayarlamak istediğiniz duyarlı bir düzen oluşturmak için Bootstrap 3 kullanıyorum. Bu tür bir mantık oluşturmak için medya sorgularını nasıl kullanabilirim?

Önyükleme 3

Tutarlı kalmak istiyorsanız, BS3'te kullanılan seçiciler şunlardır:

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

Not: Bilginize, bu hata ayıklama için yararlı olabilir:

<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'te kullanılan seçiciler. BS4'te "en düşük" ayarı yoktur, çünkü "çok küçük" varsayılan değerdir. Yani önce XS boyutunu kodlarsınız ve daha sonra bu ortamları geçersiz kılarsınız.

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

Güncelleme 2019-02-11: BS3 bilgisi 3.4.0 sürümünden itibaren hala doğru, yeni ızgara için BS4 güncellendi, 4.3.0 itibariyle doğru.

Bisio'nun cevabına ve Bootstrap 3 koduna dayanarak, sadece tüm medya sorgusunu kendi stil sayfasına kopyalayıp yapıştırmak isteyen herkes için daha doğru bir cevap buldum:

/* 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 veya SCSS / SASS kullanıyorsanız ve Bootstrap'in LESS / SCSS sürümünü kullanıyorsanız , bunlara erişiminiz varsa değişkenleri de kullanabilirsiniz . @ Full-decent'ın cevabının daha az çevirisi şu şekilde olacaktır:

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

İçin değişkenler de vardır @screen-sm-maxve @screen-md-max1 piksel az olan, @screen-md-minve @screen-lg-mintipik olarak kullanım için, sırasıyla, @media(max-width).

DÜZENLEME: SCSS / SASS kullanıyorsanız, değişkenler a $yerine başlar @, bu yüzden $screen-xs-maxvb. Olur .

Bunlar Bootstrap3'teki değerlerdir:

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

İşte iki örnek.

Görünüm 700 piksel veya daha az olduğunda, tüm h1 etiketlerini 20 piksel yapın.

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

Görüntü alanı 700 piksel veya daha büyük olana kadar tüm h1'leri 20 piksel yapın.

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

Umarım bu yardımcı olur: 0)

İşte daha az dosyayı içe aktarmadan Bootstrap'i taklit etmek için LESS kullanan daha modüler bir örnek.

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

}

Diğer kullanıcıların cevaplarına dayanarak, daha kolay kullanım için bu özel karışımları yazdım:

Daha az giriş

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

Örnek kullanım

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

SCSS girişi

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

Örnek kullanım:

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

Çıktı

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

Bootstrap v3.3.6'dan itibaren, kullanılabilir yanıt sınıflarını özetleyen belgelere karşılık gelen aşağıdaki medya sorguları kullanılmaktadır ( 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) {}

Aşağıdaki daha az dosyadan Bootstrap GitHub havuzundan çıkarılan medya sorguları: -

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

Veya basit 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;
    }
}

Misal:

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

duyarlı ölçeklemelerin var olmasının ana nedeni metin ölçeklemesinden kaçınmanın olduğunu unutmayın. duyarlı sitelerin arkasındaki mantığın tamamı, içeriğinizi etkili bir şekilde görüntüleyen ve birden çok ekran boyutunda kolayca okunabilecek ve kullanılabilecek işlevsel düzenler oluşturmaktır.

Bazı durumlarda metni ölçeklendirmek gerekli olsa da, sitenizi küçültmemeye ve noktayı kaçırmamaya dikkat edin.

yine de bir örnek.

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

}

Ayrıca 480 görünümün bootstrap 3'e düşürüldüğünü unutmayın.

Izgara sistemimizdeki anahtar kesme noktalarını oluşturmak için Daha az dosyamızda aşağıdaki medya sorgularını kullanırız.

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

ayrıca bkz. Bootstrap

örneğimde yazı tipi boyutlarının ve arka plan renklerinin ekran boyutuna göre değiştiğini görebilirsiniz

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

Ortam sorgularına dayalı ayrı duyarlı dosyalar da dahil olmak üzere daha da kolay bir durak çözümü.

Bu, tüm medya sorgu mantığının ve mantığın yalnızca bir sayfada, yükleyicide var olmasını sağlar. Ayrıca, medya sorgularının duyarlı stil sayfalarını kendilerinin karıştırmasına izin vermez.

//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 şöyle görünecektir

/**
* 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 şöyle görünecektir

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

dizininizin yükleyiciyi yüklemesi gerekir.

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

çantada keklik..

Bootstrap, düzenimiz, ızgara sistemimiz ve bileşenlerimiz için kaynak Sass dosyalarımızda öncelikle aşağıdaki medya sorgu aralıklarını (veya kesme noktalarını) kullanır.

Ekstra küçük aygıtlar (portre telefonlar, 576 pikselden az) xsBootstrap'ta bu varsayılan değer olduğu için medya sorgusu yok

Küçük cihazlar (yatay telefonlar, 576 piksel ve üstü)

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

Orta boy cihazlar (tabletler, 768 piksel ve üstü)

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

Büyük cihazlar (masaüstü bilgisayarlar, 992 piksel ve üstü)

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

Ekstra büyük cihazlar (büyük masaüstü bilgisayarlar, 1200 piksel ve üstü)

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

Kaynak CSS'imizi Sass'a yazdığımızdan, tüm medya sorgularımıza Sass mixins aracılığıyla erişilebilir:

Etkili olduğu için xs kesme noktası için medya sorgusu gerekmez @media (min-width: 0) { ... }

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

Bunu derinden anlamak için lütfen aşağıdaki bağlantıdan geçin

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

yalnızca medya ve ekran (maksimum genişlik: 1200 piksel) {}

yalnızca medya ve ekran (maksimum genişlik: 979 piksel) {}

yalnızca medya ve ekran (maksimum genişlik: 767 piksel) {}

yalnızca medya ve ekran (maksimum genişlik: 480 piksel) {}

yalnızca medya ve ekran (maksimum genişlik: 320 piksel) {}

@media (min. genişlik: 768 piksel) ve (max-genişlik: 991 piksel) {}

@media (min genişlik: 992 piksel) ve (max genişlik: 1024 piksel) {}

IE için medya sorgularını kullanma;

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

:)

En son önyüklemede (4.3.1), SCSS (SASS) kullanarak aşağıdakilerden birini kullanabilirsiniz: /bootstrap/scss/mixins/_breakpoints.scss

En az minimum kesme noktası genişliğine sahip ortam. En küçük kesme noktası için sorgu yok. @Content değerini verilen kesme noktasına ve daha geniş bir alana uygular.

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

En fazla maksimum kesme noktası genişliğine sahip ortam. En büyük kesme noktası için sorgu yok. @Content öğesini verilen kesme noktasına ve daha dar hale getirir.

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

Birden fazla kesme noktası genişliğine yayılan ortam. @Content değerini min ve max kesme noktaları arasında uygular

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

Kesme noktasının minimum ve maksimum genişlikleri arasındaki medya. En küçük kesme noktası için minimum ve en büyük kesme noktası için maksimum yoktur. @Content öğesini yalnızca verilen kesme noktasına uygular, daha geniş veya daha dar görünüm pencerelerine uygulamaz.

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

Örneğin:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Belgeler:

• giriş https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• göç https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• değişkenler https://getbootstrap.com/docs/4.3/layout/grid/#variables

Mutlu kodlama;)

Ana yanıtı iyileştirmek için:

Yalnızca kullanıcının ihtiyaç duyduğu kodu indirmek için etiketin media özelliğini <link>(medya sorgularını destekler) kullanabilirsiniz.

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

Bununla tarayıcı, ortam özelliğine bakılmaksızın tüm CSS kaynaklarını indirir . Aradaki fark, media özelliğinin medya sorgusu yanlış olarak değerlendirilirse, bu .css dosyası ve içeriğinin oluşturma engellemesi olmayacağıdır.

Bu nedenle, daha iyi bir kullanıcı deneyimi garanti ettiği için etiketteki medya özelliğinin kullanılması önerilir <link>.

Burada bu sorunla ilgili bir Google makalesini okuyabilirsiniz https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Medya sorgularınıza göre css kodunuzun farklı dosyalarda ayrılmasını otomatikleştirmenize yardımcı olacak bazı araçlar

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