Tôi đang sử dụng Bootstrap 3 để xây dựng bố cục đáp ứng trong đó tôi muốn điều chỉnh một vài kích thước phông chữ theo kích thước màn hình. Làm thế nào tôi có thể sử dụng truy vấn phương tiện để thực hiện loại logic này?

Bootstrap 3

Dưới đây là các công cụ chọn được sử dụng trong BS3, nếu bạn muốn duy trì sự nhất quán:

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

Lưu ý: FYI, điều này có thể hữu ích để gỡ lỗi:

<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

Dưới đây là các bộ chọn được sử dụng trong BS4. Không có cài đặt "thấp nhất" trong BS4 vì "cực nhỏ" là mặc định. Tức là trước tiên bạn sẽ mã kích thước XS và sau đó ghi đè các phương tiện này sau đó.

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

Cập nhật 2019-02-11: Thông tin BS3 vẫn chính xác kể từ phiên bản 3.4.0, BS4 được cập nhật cho lưới mới, chính xác kể từ 4.3.0.

Dựa trên câu trả lời của bisio và mã Bootstrap 3, tôi đã có thể đưa ra câu trả lời chính xác hơn cho bất kỳ ai chỉ muốn sao chép và dán bộ truy vấn phương tiện hoàn chỉnh vào biểu định kiểu của họ:

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

}

Nếu bạn đang sử dụng LESS hoặc SCSS / SASS và bạn đang sử dụng phiên bản Bootstrap LESS / SCSS, bạn cũng có thể sử dụng các biến , miễn là bạn có quyền truy cập vào chúng. Bản dịch LESS của câu trả lời @ full-đàng hoàng sẽ như sau:

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

Ngoài ra còn có các biến cho @screen-sm-maxvà @screen-md-max, ít hơn 1 pixel so với @screen-md-minvà @screen-lg-min, tương ứng, thường được sử dụng với @media(max-width).

EDIT: Nếu bạn đang sử dụng SCSS / SASS, các biến bắt đầu bằng một $thay vì a @, vì vậy nó sẽ là $screen-xs-maxv.v.

Đây là các giá trị từ 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){}

Đây là hai ví dụ.

Khi chế độ xem trở nên rộng 700px hoặc ít hơn, hãy tạo tất cả các thẻ h1 20px.

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

Tạo tất cả 20px của h1 cho đến khi khung nhìn đạt 700px hoặc lớn hơn.

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

Hy vọng điều này sẽ giúp: 0)

Dưới đây là một ví dụ mô-đun hơn bằng cách sử dụng LESS để bắt chước Bootstrap mà không cần nhập ít tệp hơn.

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

}

Dựa trên câu trả lời của người dùng khác, tôi đã viết các mixin tùy chỉnh này để sử dụng dễ dàng hơn:

Đầu vào ít hơn

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

Ví dụ sử dụng

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

Đầu vào 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; } }

Ví dụ sử dụng:

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

Đầu ra

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

Kể từ Bootstrap v3.3.6, các truy vấn phương tiện sau đây được sử dụng tương ứng với tài liệu phác thảo các lớp phản hồi có sẵn ( 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) {}

Các truy vấn phương tiện được trích xuất từ ​​kho lưu trữ Bootstrap GitHub từ các tệp ít hơn sau: -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variabled.less

Hoặc Sass-La bàn đơn giản:

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

Thí dụ:

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

Hãy nhớ rằng việc tránh chia tỷ lệ văn bản là lý do chính khiến bố cục đáp ứng tồn tại. toàn bộ logic đằng sau các trang web đáp ứng là tạo bố cục chức năng hiển thị hiệu quả nội dung của bạn để có thể dễ dàng đọc và sử dụng được trên nhiều kích thước màn hình.

Mặc dù cần phải chia tỷ lệ văn bản trong một số trường hợp, hãy cẩn thận không thu nhỏ trang web của bạn và bỏ lỡ điểm.

Đây là một ví dụ.

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

}

Ngoài ra, hãy nhớ rằng khung nhìn 480 đã bị bỏ trong bootstrap 3.

Chúng tôi sử dụng các truy vấn phương tiện sau trong các tệp Ít hơn để tạo các điểm dừng chính trong hệ thống lưới của chúng tôi.

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

xem thêm trên Bootstrap

bạn có thể thấy trong ví dụ kích thước phông chữ của tôi và màu nền đang thay đổi theo kích thước màn hình

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

Đây là một giải pháp một điểm dừng dễ dàng hơn, bao gồm các tệp phản hồi riêng biệt dựa trên các truy vấn phương tiện.

Điều này cho phép tất cả logic truy vấn phương tiện và bao gồm logic chỉ phải tồn tại trên một trang, trình tải. Nó cũng cho phép không có các truy vấn phương tiện làm lộn xộn các bản định kiểu đáp ứng.

//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 sẽ trông như thế này

/**
* 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 sẽ trông như thế này

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

chỉ mục của bạn sẽ phải tải loader.less

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

dễ như ăn bánh..

Bootstrap chủ yếu sử dụng các phạm vi truy vấn phương tiện sau đây trong phạm vi tập tin hoặc điểm dừng trong các tệp Sass nguồn của chúng tôi cho bố cục, hệ thống lưới và các thành phần của chúng tôi.

Thêm thiết bị nhỏ (điện thoại dọc, dưới 576px) Không có truy vấn phương tiện nào xsvì đây là mặc định trong Bootstrap

Các thiết bị nhỏ (điện thoại ngang, 576px trở lên)

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

Thiết bị trung bình (máy tính bảng, 768px trở lên)

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

Các thiết bị lớn (máy tính để bàn, 992px trở lên)

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

Thiết bị cực lớn (máy tính để bàn lớn, 1200px trở lên)

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

Vì chúng tôi viết CSS nguồn của mình bằng Sass, nên tất cả các truy vấn phương tiện của chúng tôi đều có sẵn thông qua Sass mixins:

Không có truy vấn phương tiện cần thiết cho điểm dừng xs vì nó hiệu quả @media (min-width: 0) { ... }

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

Để hiểu sâu sắc, xin vui lòng đi qua liên kết dưới đây

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

@media chỉ màn hình và (max-width: 1200px) {}

@media chỉ màn hình và (chiều rộng tối đa: 979px) {}

@media chỉ màn hình và (chiều rộng tối đa: 767px) {}

@media chỉ màn hình và (chiều rộng tối đa: 480px) {}

@media chỉ màn hình và (chiều rộng tối đa: 320px) {}

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

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

Sử dụng truy vấn phương tiện cho 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) {
}

:)

Trong bootstrap mới nhất (4.3.1), sử dụng SCSS (SASS), bạn có thể sử dụng một trong @mixin từ /bootstrap/scss/mixins/_breakpoints.scss

Phương tiện truyền thông ít nhất là chiều rộng điểm dừng tối thiểu. Không có truy vấn cho điểm dừng nhỏ nhất. Làm cho @content áp dụng cho điểm dừng đã cho và rộng hơn.

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

Phương tiện của tối đa chiều rộng điểm dừng tối đa. Không có truy vấn cho điểm dừng lớn nhất. Làm cho @content áp dụng cho điểm dừng đã cho và hẹp hơn.

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

Phương tiện kéo dài nhiều chiều rộng điểm dừng. Làm cho @content áp dụng giữa các điểm dừng tối thiểu và tối đa

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

Phương tiện giữa chiều rộng tối thiểu và tối đa của điểm dừng. Không có tối thiểu cho điểm dừng nhỏ nhất và không tối đa cho điểm lớn nhất. Làm cho @content chỉ áp dụng cho điểm dừng nhất định, không hiển thị chế độ xem rộng hơn hoặc hẹp hơn.

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

Ví dụ:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Tài liệu:

• giới thiệu https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoint
• di chuyển https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• biến https://getbootstrap.com/docs/4.3/layout/grid/#variables

Chúc mừng mã hóa;)

Để cải thiện phản ứng chính:

Bạn có thể sử dụng thuộc tính đa phương tiện của <link>thẻ (nó hỗ trợ truy vấn phương tiện) để chỉ tải xuống mã mà người dùng cần.

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

Với điều này, trình duyệt sẽ tải xuống tất cả các tài nguyên CSS, bất kể thuộc tính đa phương tiện . Sự khác biệt là nếu truy vấn phương tiện của thuộc tính media được đánh giá là false thì tệp .css đó và nội dung của anh ta sẽ không bị chặn kết xuất.

Do đó, nên sử dụng thuộc tính media trong <link>thẻ vì nó đảm bảo trải nghiệm người dùng tốt hơn.

Tại đây, bạn có thể đọc một bài viết của Google về vấn đề này https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Một số công cụ sẽ giúp bạn tự động hóa việc tách mã css của bạn trong các tệp khác nhau theo truy vấn phương tiện của bạn

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splmit-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query