온 부트 스트랩 3 미디어 쿼리 문서 는 말합니다 :

Less 파일에서 다음과 같은 미디어 쿼리를 사용하여 그리드 시스템에서 주요 중단 점을 만듭니다.

초소형 장치 (전화, 768 픽셀 미만) : 미디어 쿼리가 없습니다. 이것이 부트 스트랩의 기본값이므로

소형 기기 (태블릿, 768 픽셀 이상) : @media (min-width: @screen-sm-min) { ... }

중형 기기 (데스크톱, 992px 이상) : @media (min-width: @screen-md-min) { ... }

대형 장치 (대형 데스크톱, 1200px 이상) : @media (min-width: @screen-lg-min) { ... }

우리가 사용할 수 있도록되어 있는가 @screen-sm, @screen-md그리고 @screen-lg뿐만 아니라 우리의 미디어 쿼리에 이름을? 그것은 나를 위해 작동하지 않기 때문에. @media (min-width: 768px) {...}작동하기 전에 픽셀 측정을 사용해야 합니다. 내가 뭔가 잘못하고 있습니까?

또한 초소형 장치의 오타가 480px에 대한 참조입니까? 767px까지 말하면 안됩니까? ( 문서에서 제거 된 이후 )

부트 스트랩 4 미디어 쿼리

// 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는 Sass Mixins를 통해 포함 할 수있는 Sass의 소스 CSS를 제공합니다.

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

부트 스트랩 3 미디어 쿼리

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

}

부트 스트랩 2.3.2 미디어 쿼리

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

}

리소스 : https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

부트 스트랩은 미디어 쿼리를 잘 문서화하지 않습니다. 의 그 변수 @screen-sm, @screen-md, @screen-lg실제로 LESS 변수와 간단하지 CSS를 참조한다.

부트 스트랩을 사용자 정의하면 미디어 쿼리 중단 점을 변경할 수 있으며 컴파일시 @ screen-xx 변수는 screen-xx로 정의한 픽셀 너비로 변경됩니다. 이것이 이와 같은 프레임 워크를 한 번 코딩 한 다음 최종 사용자가 필요에 맞게 사용자 정의 할 수있는 방법입니다.

여기에 더 명확성을 제공 할 수있는 비슷한 질문 : Bootstrap 3.0 미디어 쿼리

CSS에서 여전히 전통적인 미디어 쿼리를 사용하여 Bootstrap이 수행하는 작업을 재정의하거나 추가해야합니다.

두 번째 질문과 관련해서는 오타가 아닙니다. 화면이 768px 아래로 떨어지면 프레임 워크가 완전히 유동적으로되고 모든 장치 너비에서 크기가 조정되므로 중단 점이 필요 없습니다. 모바일 최적화를위한 레이아웃에 특정 변경 사항이 있기 때문에 480px의 중단 점이 존재합니다.

이 기능을 실제로 보려면 사이트 ( http://getbootstrap.com/examples/navbar-fixed-top/ ) 에서이 예제로 이동 한 후 창 크기를 조정하여 768px 이후의 디자인을 처리하는 방식을 확인하십시오.

이 문제는 https://github.com/twbs/bootstrap/issues/10203 에서 논의되었습니다 . 지금까지 호환성 문제로 인해 Grid를 변경할 계획이 없습니다.

https://github.com/antespi/bootstrap/tree/hshs : 이 포크에서 부트 스트랩을 얻을 수 있습니다

이 브랜치는 480px의 추가 중단 점을 제공하므로 다음을 수행해야합니다.

1. 모바일 우선 디자인 (XS, 480px 미만)
2. HTML에 HS (Horizontal Small Devices) 클래스 추가 : col-hs- *, visible-hs, ... 및 수평 모바일 장치 용 디자인 (HS, 768px 미만)
3. 태블릿 장치 용 설계 (SM, 992px 미만)
4. 데스크톱 장치 용 디자인 (MD, 1200px 미만)
5. 대형 장치 용 설계 (LG, 1200px 이상)

Bootstrap 3을 이해하기 위해서는 먼저 모바일 디자인이 중요합니다. 이것이 BootStrap 2.x의 주요 변경 사항입니다. 규칙 템플릿으로 다음을 수행 할 수 있습니다 (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) */
    }
}

나는 이것이 조금 오래되었다는 것을 알고 있지만, 내가 기여할 것이라고 생각했다. @Sophy의 답변을 바탕으로 .xxs 중단 점을 추가했습니다. visible-inline, table.visible 등의 클래스를 처리하지 않았습니다.

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

}

480px에 대한 참조가 제거되었습니다. 대신 그것은 말합니다 :

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

Bootstrap 3에는 768px 미만의 중단 점이 없습니다.

@screen-sm-min및 기타 믹스 인 을 사용하려면 LESS로 컴파일해야합니다. http://getbootstrap.com/css/#grid-less

다음은 Bootstrap 3 및 LESS 사용 방법에 대한 자습서입니다. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

http://lesscss.org/ 를 사용하여 CSS를 빌드 하는 경우 이러한 중단 점을 사용할 수 있어야합니다 .

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

에서 https://getbootstrap.com/docs/3.4/css/#grid-media-queries

실제로 @screen-sm-min는 _variableLess로 빌드 할 때 지정된 값으로 대체되는 것보다 변수 입니다. Less를 사용하지 않으면이 변수를 값으로 대체 할 수 있습니다.

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

부트 스트랩 3 공식적으로 말대꾸를 지원합니다 https://github.com/twbs/bootstrap-sass . Sass를 사용하고 있다면 구문이 약간 다릅니다.

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

다음은 부트 스트랩 4에서 사용되는 선택기입니다. BS4에는 "초소형"이 기본값이므로 "최저"설정이 없습니다. 즉, 먼저 XS 크기를 코딩 한 다음 나중에이 미디어를 덮어 씁니다.

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

@media (max-width : 768px)를 사용하면 디자인이 768px에서 중단됩니다. 그러나 767px 및 769px에서도 괜찮습니다. 따라서 작은 기기를 타겟팅 할 때 최대 너비는 767 픽셀이라고 생각합니다.

부트 스트랩 3의 경우 내 탐색 모음 구성 요소에 다음 코드가 있습니다.

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

다음과 같은 것을 사용할 수 있습니다

@media wide { selector: style }

변수를 설정 한 값을 사용합니다.

이스케이프를 사용하면 임의의 문자열을 속성 또는 변수 값으로 사용할 수 있습니다. ~ "anything"또는 ~ 'anything'안에있는 것은 보간 이외의 다른 변경 사항없이 그대로 사용됩니다.

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



}