Trên tài liệu truy vấn phương tiện Bootstrap 3 có ghi :

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.

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

Các thiết bị nhỏ (máy tính bảng, 768px trở lên): @media (min-width: @screen-sm-min) { ... }

Các thiết bị trung bình (máy tính để bàn, 992px trở lên): @media (min-width: @screen-md-min) { ... }

Các thiết bị lớn (máy tính để bàn lớn, 1200px trở lên): @media (min-width: @screen-lg-min) { ... }

Có phải chúng ta phải có khả năng sử dụng @screen-sm, @screen-mdvà @screen-lgtên trong các truy vấn phương tiện truyền thông của chúng tôi không? Bởi vì nó không làm việc cho tôi. Tôi phải sử dụng các phép đo pixel như @media (min-width: 768px) {...}trước khi nó hoạt động. Tôi có làm điều gì sai?

Ngoài ra, tham chiếu đến 480px cho các thiết bị nhỏ thêm có phải là một lỗi đánh máy không? Không nên nói lên đến 767px? ( kể từ khi xóa khỏi tài liệu )

Bootstrap 4 Truy vấn phương tiện truyền thông

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4 cung cấp CSS nguồn trong Sass mà bạn có thể đưa vào thông qua Sass Mixins:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3 Truy vấn phương tiện truyền thông

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap 2.3.2 Truy vấn phương tiện truyền thông

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

Tài nguyên từ: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap không ghi lại các truy vấn phương tiện rất tốt. Những biến của @screen-sm, @screen-md, @screen-lgđang thực sự đề cập đến biến LESS và CSS không đơn giản.

Khi bạn tùy chỉnh Bootstrap, bạn có thể thay đổi các điểm dừng truy vấn phương tiện và khi nó biên dịch các biến @ screen-xx được thay đổi thành bất kỳ chiều rộng pixel nào bạn xác định là screen-xx. Đây là cách một khung như thế này có thể được mã hóa một lần và sau đó được người dùng cuối tùy chỉnh để phù hợp với nhu cầu của họ.

Một câu hỏi tương tự ở đây có thể cung cấp rõ ràng hơn: Truy vấn phương tiện Bootstrap 3.0

Trong CSS của bạn, bạn vẫn sẽ phải sử dụng các truy vấn phương tiện truyền thống để ghi đè hoặc thêm vào những gì Bootstrap đang làm.

Liên quan đến câu hỏi thứ hai của bạn, đó không phải là một lỗi đánh máy. Khi màn hình xuống dưới 768px, khung sẽ hoàn toàn lỏng và thay đổi kích thước ở bất kỳ chiều rộng thiết bị nào, loại bỏ sự cần thiết của các điểm dừng. Điểm dừng ở 480px tồn tại vì có những thay đổi cụ thể xảy ra đối với bố cục để tối ưu hóa cho thiết bị di động.

Để xem điều này trong thực tế, hãy truy cập ví dụ này trên trang web của họ ( http://getbootstrap.com/examples/navbar-fixed-top/ ) và thay đổi kích thước cửa sổ của bạn để xem cách nó xử lý thiết kế sau 768px.

Vấn đề này đã được thảo luận trong https://github.com/twbs/bootstrap/issues/10203 Cho đến nay, không có kế hoạch thay đổi Lưới vì lý do tương thích.

Bạn có thể nhận Bootstrap từ ngã ba này, chi nhánh hs: https://github.com/antespi/bootstrap/tree/hs

Chi nhánh này cung cấp cho bạn một điểm dừng thêm ở 480px, vì vậy bạn phải:

1. Thiết kế cho thiết bị di động đầu tiên (XS, dưới 480px)
2. Thêm các lớp HS (Thiết bị nhỏ nằm ngang) trong HTML của bạn: col-hs- *, nhìn thấy-hs, ... và thiết kế cho các thiết bị di động ngang (HS, dưới 768px)
3. Thiết kế cho các thiết bị máy tính bảng (SM, dưới 992px)
4. Thiết kế cho các thiết bị máy tính để bàn (MD, dưới 1200px)
5. Thiết kế cho các thiết bị lớn (LG, hơn 1200px)

Thiết kế di động trước tiên là chìa khóa để hiểu Bootstrap 3. Đây là thay đổi lớn từ BootStrap 2.x. Là một mẫu quy tắc, bạn có thể làm theo điều này (trong LESS):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

Tôi biết điều này là một chút cũ, nhưng tôi nghĩ rằng tôi sẽ đóng góp. Dựa vào câu trả lời của @Sophy, đây là những gì tôi đã làm để thêm một điểm dừng .xxs. Tôi đã không quan tâm đến các lớp có thể nhìn thấy, nội tuyến, bảng.visible, v.v.

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Tham chiếu đến 480px đã bị xóa. Thay vào đó, nó nói:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Không có điểm dừng dưới 768px trong Bootstrap 3.

Nếu bạn muốn sử dụng @screen-sm-minvà các mixin khác thì bạn cần phải biên dịch với LESS, xem http://getbootstrap.com/css/#grid-less

Đây là hướng dẫn về cách sử dụng Bootstrap 3 và LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Bạn sẽ có thể sử dụng các điểm dừng đó nếu bạn sử dụng http://lesscss.org/ để xây dựng CSS của mình.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

Từ https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Trong thực tế, @screen-sm-minmột biến hơn được thay thế bằng giá trị được chỉ định _variablekhi xây dựng với Ít hơn. Nếu bạn không sử dụng Ít hơn, bạn có thể thay thế biến này bằng giá trị:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3 chính thức hỗ trợ Sass: https://github.com/twbs/bootstrap-sass . Nếu bạn đang sử dụng Sass (và bạn nên) thì cú pháp hơi khác một chút.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

Dưới đây là các bộ chọn được sử dụng trong Bootstrap 4. 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){}

Khi tôi sử dụng @media (max-width: 768px) thiết kế của tôi bị hỏng trên 768px. Nhưng nó ổn trên 767px và 769px. Vì vậy, tôi nghĩ rằng nó sẽ là 767px dưới dạng chiều rộng tối đa để nhắm mục tiêu các thiết bị nhỏ.

cho bootstrap 3 Tôi có đoạn mã sau trong thành phần thanh điều hướng của mình

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

sau đó bạn có thể sử dụng một cái gì đó như

@media wide { selector: style }

Điều này sử dụng bất cứ giá trị nào bạn có các biến được đặt thành.

Thoát cho phép bạn sử dụng bất kỳ chuỗi tùy ý làm thuộc tính hoặc giá trị biến. Bất cứ điều gì bên trong ~ "bất cứ điều gì" hoặc ~ 'bất cứ điều gì' đều được sử dụng như không có thay đổi ngoại trừ nội suy.

http://lesscss.org

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}