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

2019-02-11 업데이트 : BS3 정보는 여전히 버전 3.4.0에서 정확하고 새 그리드에 대해 BS4가 업데이트되었으며 4.3.0에서 정확합니다.

bisio의 답변과 Bootstrap 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의 답변에 대한 LESS 번역은 다음과 같습니다.

@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에 대한 변수도 있습니다.이 변수는 일반적으로와 함께 사용하기 위해 @screen-md-min및 보다 1 픽셀 작습니다 .@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)

다음은 적은 파일을 가져 오지 않고 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;
  }
}

Bootstrap v3.3.6부터는 다음과 같은 미디어 쿼리가 사용되며 사용 가능한 응답 클래스를 설명하는 문서와 일치합니다 ( 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) {}

Bootstrap GitHub 리포지토리에서 다음과 같은 적은 파일로 추출한 미디어 쿼리 :-

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

또는 간단한 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" />

쉬워요..

부트 스트랩은 주로 레이아웃, 그리드 시스템 및 구성 요소에 대한 소스 Sass 파일에서 다음과 같은 미디어 쿼리 범위 또는 중단 점을 사용합니다.

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

소형 장치 (가로 전화, 576px 이상)

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

중형 기기 (태블릿, 768 픽셀 이상)

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

대형 장치 (데스크톱, 992px 이상)

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

초대형 장치 (대형 데스크톱, 1200px 이상)

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

소스 CSS를 Sass로 작성하기 때문에 모든 미디어 쿼리는 Sass 믹스 인을 통해 제공됩니다

효과적으로 xs 중단 점에 미디어 쿼리가 필요하지 않습니다. @media (min-width: 0) { ... }

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

깊이 이해하려면 아래 링크를 통해 이동하십시오

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

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

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

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

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

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

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

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

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

:)

최신 부트 스트랩 (4.3.1)에서는 SCSS (SASS)를 사용하여 다음 중 하나의 @mixin을 사용할 수 있습니다. /bootstrap/scss/mixins/_breakpoints.scss

최소 중단 점 너비의 미디어. 가장 작은 중단 점에 대한 쿼리가 없습니다. @content가 주어진 중단 점에 더 넓게 적용되도록합니다.

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

최대 최대 중단 점 너비의 미디어. 가장 큰 중단 점에 대한 쿼리가 없습니다. @content를 지정된 중단 점에 적용하고 더 좁게 만듭니다.

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

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

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

중단 점의 최소 및 최대 너비 사이의 미디어. 가장 작은 중단 점에는 최소가없고 가장 큰 중단 점에는 최대가 없습니다. @content를 주어진 중단 점에만 적용하고 뷰포트는 더 넓거나 좁지 않습니다.

@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/#responsive-breakpoints
• 이주 https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• 변수 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 리소스를 다운로드 합니다. 차이점은 media 속성의 미디어 쿼리가 false 로 평가되면 해당 .css 파일과 그의 내용이 렌더링 차단되지 않는다는 것입니다.

따라서 더 나은 사용자 환경을 보장하기 위해 태그에 media 속성 을 사용하는 것이 좋습니다 <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