트위터 부트스트랩 3: 미디어 쿼리를 사용하는 방법?

트위터 부트스트랩 3: 미디어 쿼리를 사용하는 방법?

저는 화면 크기에 따라 몇 가지 글꼴 크기를 조정하고 싶은 반응형 레이아웃을 만들기 위해 부트스트랩 3을 사용하고 있습니다.미디어 쿼리를 사용하여 이런 종류의 논리를 만들 수 있는 방법은 무엇입니까?

부트스트랩 3

BS3에서 사용되는 실렉터는 일관성을 유지하기 위해 다음과 같습니다.

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

참고: 참고: 참고로, 이것은 디버깅에 유용할 수 있습니다.

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

부트스트랩 4

다음은 BS4에 사용된 실렉터입니다.BS4에는 "특별히 작음"이 기본값이기 때문에 "최저" 설정이 없습니다. 즉, 먼저 XS 크기를 코딩한 다음 나중에 이러한 미디어 오버라이드를 수행합니다.

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

부트스트랩 5

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

업데이트 2021-05-20: 정보는 버전 3.4.1, 4.6.0, 5.0.0에서 여전히 정확합니다.

bisio의 답변과 부트스트랩 3 코드를 기반으로, 저는 전체 미디어 쿼리 세트를 복사하여 스타일시트에 붙여넣으려는 사람들을 위해 더 정확한 답변을 생각해 낼 수 있었습니다.

/* 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 또는 SCSS/SASS를 사용하고 LESS/SCSS 버전의 부트스트랩을 사용하는 경우 변수에 액세스할 수 있는 경우 변수도 사용할 수 있습니다.@full-decent의 답변을 덜 번역하면 다음과 같습니다.

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

다음을 위한 변수도 있습니다.@screen-sm-max그리고.@screen-md-max 1셀적보다 1픽셀 입니다.@screen-md-min그리고.@screen-lg-min각각, 일반적으로 와 함께 사용합니다.@media(max-width).

편집: SCSS/SASS를 사용하는 경우 변수는 다음으로 시작합니다.$신에대 @그래서 그럴 겁니다.$screen-xs-max

다음은 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){}

여기 두 가지 예가 있습니다.

뷰포트 너비가 700px 이하가 되면 모든 h1 태그를 20px로 만듭니다.

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

뷰포트가 700px 이상이 될 때까지 모든 h1의 20px를 만듭니다.

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

이것이 도움이 되길 바랍니다:0)

부트스트랩 3

Bootstrap 3(v3.4.1)의 최종 버전 릴리스에서는 다음과 같은 미디어 쿼리가 사용되었으며, 이는 사용 가능한 응답 클래스를 요약하는 문서에 해당합니다.https://getbootstrap.com/docs/3.4/css/ #응답형-메시지

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

Bootstrap GitHub 저장소에서 추출한 미디어 쿼리 수가 다음보다 적음:-

https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less

부트스트랩 5

버전 5에 대한 설명서에서 미디어 쿼리 중단점이 버전 3 이후 최신 장치 치수에 더 적합하도록 업데이트되었음을 알 수 있습니다.

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }

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

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

출처: 부트스트랩 5 설명서

---

Bootstrap GitHub 저장소에서 v5.1.3의 중단점을 볼 수 있습니다.

https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss

2021-12-19에 업데이트됨

다음은 LESS를 사용하여 더 적은 파일을 가져오지 않고 부트스트랩을 모방하는 모듈식 예제입니다.

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

}

다른 사용자들의 답변을 바탕으로, 나는 더 쉽게 사용할 수 있도록 다음과 같은 맞춤형 믹스인을 작성했습니다.

투입량 감소

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

사용 예

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

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

사용 예:

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

산출량

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

또는 간단한 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;
    }
}

예:

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

텍스트 크기 조정을 피하는 것이 응답형 레이아웃이 존재하는 주요 이유입니다.응답 사이트 뒤의 전체 논리는 컨텐츠를 효과적으로 표시하여 여러 화면 크기에서 쉽게 읽을 수 있고 사용할 수 있도록 기능적 레이아웃을 만드는 것입니다.

경우에 따라 텍스트의 크기를 조정해야 하지만 사이트가 축소되지 않도록 주의하고 요점을 놓치지 마십시오.

어쨌든 여기 예시가 있습니다.

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

}

또한 부트스트랩 3에서 480 뷰포트가 삭제되었습니다.

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

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

부트스트랩 참고 항목

화면 크기에 따라 글꼴 크기와 배경색이 변경되는 것을 제 예에서 볼 수 있습니다.

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

미디어 쿼리에 기반한 별도의 응답 파일을 포함하여 훨씬 더 쉬운 원스톱 솔루션이 있습니다.

이렇게 하면 모든 미디어 쿼리 논리와 포함 논리가 로더라는 한 페이지에만 존재하면 됩니다.또한 미디어 쿼리가 응답 스타일 시트 자체를 혼란스럽게 하지 않도록 합니다.

//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는 이렇게 보일 것입니다.

/**
* 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는 이렇게 보일 것입니다.

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

인덱스는 로더를 로드하기만 하면 됩니다.

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

쉬엄쉬엄..

@미디어 전용 화면 및 (최대 너비: 1200ppm) {}

@미디어 전용 화면 및 (최대 너비: 979인치) {}

@미디어 전용 화면 및 (최대 너비: 767인치) {}

@미디어 전용 화면 및 (최대 너비: 480인치) {}

@미디어 전용 화면 및 (최대 너비: 320인치) {}

@media(최소 너비: 768인치) 및 (최대 너비: 991인치) {}

@media(최소 너비: 992인치) 및 (최대 너비: 1024인치) {}

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

:)

부트스트랩에서는 SCSS(SASS하여 SCSS(4.3.1)의 @ 중할 수 ./bootstrap/scss/mixins/_breakpoints.scss

최소 중단점 너비의 매체입니다.가장 작은 중단점에 대한 쿼리가 없습니다.@content를 지정된 중단점 이상에 적용합니다.

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

최대 중단점 너비의 매체입니다.가장 큰 중단점에 대한 쿼리가 없습니다.@content를 지정된 중단점에 더 좁게 적용합니다.

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

여러 중단점 너비에 걸쳐 있는 미디어입니다.@ 컨텐츠를 최소 및 최대 중단점 사이에 적용합니다.

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

중단점의 최소 너비와 최대 너비 사이의 미디어입니다.가장 작은 중단점에는 최소값이 없고 가장 큰 중단점에는 최대값이 없습니다.뷰포트를 더 넓히거나 좁히지 않고 지정된 중단점에만 @ 컨텐츠를 적용합니다.

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

예:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

설명서:

• 소개 https://getbootstrap.com/docs/4.3/layout/overview/ #대응 중단점
• 마이그레이션 https://getbootstrap.com/docs/4.3/migration/ #response-message
• 변수 https://getbootstrap.com/docs/4.3/layout/grid/ #variables

해피 코딩 ;)

주 반응을 개선하는 방법:

의 미디어 속성을 사용할 수 있습니다.<link>사용자가 필요로 하는 코드만 다운로드할 수 있도록 태그(미디어 쿼리 지원)를 지정합니다.

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

이를 통해 브라우저는 미디어 속성에 관계없이 모든 CSS 리소스를 다운로드합니다.차이점은 미디어 속성의 미디어 쿼리가 false로 평가되면 해당 .css 파일과 해당 콘텐츠가 렌더 차단되지 않는다는 것입니다.

따라서 의 미디어 속성을 사용하는 것이 좋습니다.<link>더 나은 사용자 환경을 보장하기 때문에 태그를 지정할 수 있습니다.

여기에서 이 문제에 대한 Google 기사를 읽을 수 있습니다. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

미디어 쿼리에 따라 서로 다른 파일에서 CSS 코드를 자동으로 분리하는 데 도움이 되는 몇 가지 도구

웹팩 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

언급URL : https://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries