트위터 부트 스트랩 3 : 미디어 쿼리를 사용하는 방법?
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) {
}
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
다른 사용자의 답변을 바탕으로 더 쉬운 사용법을 위해 다음과 같은 사용자 정의 믹스를 작성했습니다.
적은 입력
.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" />
쉬워요..
@ 미디어 전용 화면 및 (최대 너비 : 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
참고 URL : https://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries
'Programming' 카테고리의 다른 글
| Java에서 재귀 적으로 디렉토리 삭제 (0) | 2020.02.27 |
|---|---|
| PowerShell에서 스크립트 종료 (0) | 2020.02.27 |
| 세계에서 봄 콩은 무엇입니까? (0) | 2020.02.27 |
| 생성자에서 재정의 가능한 메서드 호출의 문제점은 무엇입니까? (0) | 2020.02.27 |
| SQL 데이터베이스 테이블에서 n 번째 행을 선택하는 방법은 무엇입니까? (0) | 2020.02.27 |